【发布时间】:2012-11-05 07:54:48
【问题描述】:
假设您链接到 YouTube 上的视频(使用嵌入或 YouTube API),或者您只使用 HTML5 视频。在前一种情况下,您正在处理 Flash,因此它似乎在可能的范围内。后一种情况似乎是不可能的。
有什么办法吗?
【问题讨论】:
标签: javascript youtube-api html5-video
假设您链接到 YouTube 上的视频(使用嵌入或 YouTube API),或者您只使用 HTML5 视频。在前一种情况下,您正在处理 Flash,因此它似乎在可能的范围内。后一种情况似乎是不可能的。
有什么办法吗?
【问题讨论】:
标签: javascript youtube-api html5-video
可以使用纯 javascript 来做到这一点。
你必须看看 webaudio api :https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
想法如下: 音频流通过节点。
[Source node (i.e. your video)]-->[Analyzer node]-->[Your custom js node]
并且(如果需要播放音频):
[Source node (i.e. your video)]-->[Output node (i.e. speakers)]
Analyzer 节点可让您实时分析声音并通过 fft(又称快速傅立叶变换)按频率对其进行采样。
你现在有了 fft 给你的每个频率的幅度。因此,您可以从中获取低音和高音。
您现在可以将自定义 js 节点插入分析器,并使用 onaudioprocess 回调来分析分析器节点给出的频率,然后用它做你想做的事。
这是我写的一段记录良好的代码:https://github.com/xseignard/webGLWebAudioAPI/blob/master/js/app/audio.js
这是以下演示的一部分:http://xseignard.github.com/webGLWebAudioAPI/
还有这篇文章,提供了一些很好的指点:http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound
还有下面的demo(看代码):http://www.smartjava.org/examples/webaudio-filters/
请注意,这些演示仅适用于最近的 Chrome
玩得开心
更新:此解决方案仅适用于纯 html5 视频,不适用于 @tim-wintle 提到的 youtube 视频。
【讨论】:
Xavier 的回答对于一般情况来说非常好,但是如果您专门询问 YouTube API,那么不,您不能这样做。
您尤其应仔细阅读 YouTube API 服务条款: https://developers.google.com/youtube/terms
特别是,您不得“分离、隔离或修改通过 YouTube API 提供的任何 YouTube 视听内容的音频或视频组件”。
从技术角度来看,他们已在 Flash 播放器中采取措施防止访问流,并在 iframe API 中将内容放置在单独的域中以防止这种情况。
【讨论】: