javascript - 在 HTML5 视频 API 播放器中使用 HTML5 音频 API 功能

Question

此小部件允许您使用 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，这样您也可以看到视频。

Answer 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';