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

Posted 2023-02-25

【中文标题】在 HTML5 Video API 播放器中使用 HTML5 Audio API 功能

【英文标题】：Using HTML5 Audio API abilities in HTML5 Video API player

【发布时间】：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，因此您也可以看到视频。

【参考方案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';