从 html5 视频中获取音频
Posted
技术标签:
【中文标题】从 html5 视频中获取音频【英文标题】:Get audio from an html5 video 【发布时间】:2013-02-13 15:21:20 【问题描述】:是否可以从 html5 中的 mp4 或 webm 视频元素中获取音频?
我正在尝试使用https://github.com/corban***/dsp.js 计算音频的 FFT,但是,我只有 mp4 和 webm 视频。
【问题讨论】:
【参考方案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
我只是用视频元素替换了音频元素。
【讨论】:
不知道你可以在视频元素上运行它!谢谢,这正是我想要的! 不错,非常有用的帖子! 'webkitAudioContext' 已弃用。请改用“AudioContext”。 另外,枚举不再使用。 api.haxe.org/js/html/audio/BiquadFilterType.html 你可以使用类似"allpass"
【参考方案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 视频中获取音频的主要内容,如果未能解决你的问题,请参考以下文章