在 HTML5 Video API 播放器中使用 HTML5 Audio API 功能答案

【问题标题】：Using HTML5 Audio API abilities in HTML5 Video API player在 HTML5 Video API 播放器中使用 HTML5 Audio API 功能
【发布时间】：2013-10-27 01:17:55
【问题描述】：

此小部件允许您使用 HTML5 音频 API 来检测音频文件的波长幅度。在此页面上，http://codepen.io/datanity/pen/gaweb 您将看到一个变色的点，作为检测的证据。

我试图保持这种幅度检测能力，但不是使用 .wav 文件，而是使用视频文件。

如果在第 65 行，如果您将 audio.src = '...' 更改为下面的 .mp4 而不是当前的 .wav，则将播放 .mp4 的音频，圆圈仍会根据幅度，但视频视觉本身将不可见。

//9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4（为方便起见以mp4为例）

我的问题是：是否可以保留本示例中显示的 HTML5 音频 API 的好处，但同时也使用 HTML5 视频 API，因此您也可以看到视频。

【问题讨论】：

标签： javascript html audio video

【解决方案1】：

是的。只需将音频元素更改为视频元素即可。这是修改后的代码：http://codepen.io/anon/pen/phKuF

  var vid = document.createElement('video'); //use video instead of audio
  vid.src = 'http://9a27bbc586dd80f4a734-4d0355cf9e89be09aa440f2192ff2da0.r28.cf1.rackcdn.com/exam-speaking-test-talk-about-yourself.mp4'; //video file
  vid.controls = true;
  vid.preload = 'auto';

【讨论】：