html5ビデオからオーディオを取得する

HTML5のmp4またはwebmビデオ要素からオーディオを取得することはできますか？html5ビデオからオーディオを取得する

私はhttps://github.com/corbanbrook/dsp.jsを使ってオーディオ用のFFTを計算しようとしていますが、私はmp4とwebmのビデオしか持っていません。

2013-02-27 jreptak

これがあなたの質問に答えても、Web Audio APIノードグラフを通してビデオのオーディオを実行できるかどうかはわかりません。以下のコードは、ゲインとフィルタのパラメータを変更することで実証できます。私はChromeでのみこれをテストしました。

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title></title> 
<body> 

</body> 


<script> 

var video = document.createElement("video"); 
video.setAttribute("src", "ourMovie.mov"); 

video.controls = true; 
video.autoplay = true; 
document.body.appendChild(video); 

var context = new webkitAudioContext(); 
var gainNode = context.createGain(); 
gainNode.gain.value = 1;     // Change Gain Value to test 
filter = context.createBiquadFilter(); 
filter.type = 2;       // Change Filter type to test 
filter.frequency.value = 5040;   // Change frequency to test 

// Wait for window.onload to fire. See crbug.com/112368 
window.addEventListener('load', function(e) { 
    // Our <video> element will be the audio source. 
    var source = context.createMediaElementSource(video); 
    source.connect(gainNode); 
    gainNode.connect(filter); 
    filter.connect(context.destination); 

}, false); 


</script>

上記のコードは、この変更されたバージョンである： http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs

Iは、単にビデオ要素とオーディオ要素を置き換えます。

出典

2013-03-08 04:27:28 William

あなたがビデオ要素上でそれを実行することができます知りませんでした！ありがとう、これは私が欲しかったものです！ – jreptak

すてきな、本当に便利なポスト！ – ejectamenta

'webkitAudioContext'は推奨されていません。代わりに 'AudioContext'を使用してください。 –

Webmはオーディオソースとして機能します。

<audio controls="controls" class="full-width" preload="metadata"> 
 
    <source src="//rack.international/samples/sample.webm" type="audio/mpeg"> 
 
</audio>

<video src="https://rack.international/samples/sample.webm" controls> 
 
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
 
</video>

出典

2017-03-21 17:38:15

html5ビデオからオーディオを取得する

答えて

関連する問題