從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

我簡單地更換與video要素的音頻元件。

來源

2013-03-08 04:27:28 William

不知道你可以爲視頻元素上運行的！謝謝，這正是我想要的！ – jreptak 2013-03-08 07:45:55

不錯的一個，真的很有用的帖子！ – ejectamenta 2016-02-27 11:53:22

'webkitAudioContext'已棄用。請改用'AudioContext'。 – 2017-03-03 17:10:03

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視頻獲取音頻

回答

相關問題