Question

是否可以通过HTML5中的mp4或webm视频元素获取音频？

我正在尝试使用https://github.com/corbanbrook/dsp.js计算音频的FFT，但是，我只有mp4和webm视频。

Answer 1

不确定这是否可以回答您的问题，但您可以通过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

我只是用视频元素替换了音频元素。

Answer 2

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>

从html5视频中获取音频

2 个答案: