Chciałbym uzyskać porady dotyczące najlepszego sposobu uzyskania poziomu aktywności mikrofonu obiektu javascript audio w Chrome/Canary. Obiekt MediaStreamTrack
jest ścieżką audio z MediaStream
zwróconą przez getUserMedia
, jako część interfejsu WebRTC javascript API.Poziom aktywności mikrofonu w WebRTC MediaStream
Odpowiedz
To, czego szukasz, to webkitAudioContext
i jego metoda createMediaStreamSource
.
Oto przykładowy kod, który czerpie zielony pasek działa jak miernik VU:
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createJavaScriptNode(2048, 1, 1);
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
canvasContext = $("#canvas")[0].getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values/length;
canvasContext.clearRect(0, 0, 60, 130);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,130);
}
}
Kiedy mikrofon ma dźwięku zielony pasek w górę iw dół bardzo miły:
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true, video:true}, function(stream){
// audioContext = new webkitAudioContext(); deprecated OLD!!
audioContext = new AudioContext(); // NEW!!
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createJavaScriptNode(2048, 1, 1);
analyser.smoothingTimeConstant = 0.3;
analyser.fftSize = 1024;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values/length;
canvasContext.clearRect(0, 0, 60, 130);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,130);
}
}
);
</script>
<canvas id="test" style="background-color: black;"></canvas>
audioContext.createJavaScriptNode zostaje zmieniona na audioContext.createScriptProcessor https://developer.mozilla.org/en-US/docs/Web/API/AudioContext.createScriptProcessor –
i teraz trzeba zdefiniować funkcję błędu dla 'webkitGetUserMedia' jako trzecie arg. – CodeBrauer
Wprowadziłem kilka poprawek do kodu z pierwszej odpowiedzi. Dodałem także:
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
Więc teraz to działa w Chrome i Firefox 39 34.
Oto skrzypce: http://jsfiddle.net/elshnkhll/p07e5vcq/
- 1. Poziom aktywności dźwięku z mikrofonu z tylko javascript
- 2. Jak zmodyfikować zawartość ścieżki wideo WebRTC MediaStream?
- 3. AS3: Poziom aktywności audio w NetStream
- 4. Brak aktywności mikrofonu z ustawieniem setLoopBack na false - AS3
- 5. WebRTC - Jak wyciszyć lokalne wyjście audio
- 6. Tworzenie odbiornika WebRTC
- 7. Android: wykryj poziom dźwięku
- 8. Jak wykryć obecność mikrofonu w systemie Android?
- 9. Dostęp do mikrofonu w Pythonie
- 10. Obciążenie WebRTC
- 11. System.Speech dół czułość mikrofonu
- 12. Łączenie ścieżek audio i wideo w nowy obiekt MediaStream
- 13. Zanikanie aktywności z poprzedniej aktywności w Androidzie
- 14. Zduplikowana klasa WebRTC w Androidzie
- 15. Impelementacja RTCDataChannel WebRTC w iOS
- 16. umożliwić użytkownikom app WebRTC ściągnąć WebRTC logów poprzez javascript
- 17. Utwórz WebRTC VideoTrack z "niestandardowym" Capturerem na Androida z libjingle
- 18. QuickBlox WebRtc VideoChat Android
- 19. WebView WebRTC nie działa
- 20. WebRTC: użycie getStats()
- 21. Jak działa WebRTC?
- 22. Limit rozdzielczości WebRTC
- 23. Webrtc AEC Algorytm
- 24. WebRTC DataChannels Speed Issue
- 25. jak działa webRTC?
- 26. Odtwarzanie dźwięku z mikrofonu w czasie rzeczywistym
- 27. Zapisywanie mikrofonu w strumieniu mp3 lub wave
- 28. Jak uzyskać dostęp do mikrofonu w JS?
- 29. Jak ustawić głośność mikrofonu w systemie Android?
- 30. Przepustowość z gniazda słuchawkowego/mikrofonu
Zapomniałaś klamrę zamykającą na samym końcu. – igorpavlov