HTML5中audio标签的使用

Posted 2023-04-22

参考技术A

HTML5 中的新元素标签
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。

这些属性和<video>元素标签的属性很类似

常用的控制函数：
1.load()：加载音频、视频软件
2.play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
3.pause()：暂停出于播放状态的音频、视频文件
4.canPlayType(obj)：测试是否支持给定的Mini类型的文件

可脚本控制的属性值：
1.autoplay：自动播放已经加载的的媒体文件
2.loop为true：的时候则设定为自动播放
3.currentTime：以s为单位返回从开始播放到目前所花的时间
4.controls：显示或者隐藏用户控制界面
5.volume：音量值,从0.0至1.0之间
6.muted：设置是否静音
7.autobuffer：是否进行缓冲加载

audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。

autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。

buffered 返回表示音频已缓冲部分的 TimeRanges 对象。

controller 返回表示音频当前媒体控制器的 MediaController 对象。

controls 设置或返回音频是否应该显示控件（比如播放/暂停等）。

crossOrigin 设置或返回音频的 CORS 设置。

currentSrc 返回当前音频的 URL。

currentTime 设置或返回音频中的当前播放位置（以秒计）。

defaultMuted 设置或返回音频默认是否静音。

defaultPlaybackRate 设置或返回音频的默认播放速度。

duration 返回音频的长度（以秒计）。

ended 返回音频的播放是否已结束。

error 返回表示音频错误状态的 MediaError 对象。

loop 设置或返回音频是否应在结束时再次播放。

mediaGroup 设置或返回音频所属媒介组合的名称。

muted 设置或返回是否关闭声音。

networkState 返回音频的当前网络状态。

paused 设置或返回音频是否暂停。

playbackRate 设置或返回音频播放的速度。

played 返回表示音频已播放部分的 TimeRanges 对象。

preload 设置或返回音频的 preload 属性的值。

readyState 返回音频当前的就绪状态。

seekable 返回表示音频可寻址部分的 TimeRanges 对象。

seeking 返回用户当前是否正在音频中进行查找。

src 设置或返回音频的 src 属性的值。

textTracks 返回表示可用文本轨道的 TextTrackList 对象。

volume 设置或返回音频的音量。

方法 描述
addTextTrack() 向音频添加新的文本轨道。

canPlayType() 检查浏览器是否能够播放指定的音频类型。

fastSeek() 在音频播放器中指定播放时间。

getStartDate() 返回新的 Date 对象，表示当前时间线偏移量。

load() 重新加载音频元素。

play() 开始播放音频。

pause() 暂停当前播放的音频。

HTML <audio> 标签的 canplaythrough 无法在移动设备上触发

【中文标题】HTML <audio> 标签的 canplaythrough 无法在移动设备上触发

【英文标题】：HTML <audio> tag's canplaythrough not firing on mobile

【发布时间】：2016-03-01 02:32:30

【问题描述】：

我正在使用 HTML 5 <audio> 标签。我觉得它很酷，但只是遇到了一个非常奇怪的情况。简而言之，canplaythrough 不会像预期的那样在移动设备上触发。

在这种情况下，我在网页上有几个按钮：

<button id="sndbtn01" onclick="createAudioById('01')">Audio 01</button>
<button id="sndbtn02" onclick="createAudioById('02')">Audio 02</button>
<button id="sndbtn03" onclick="createAudioById('03')">Audio 03</button>
<button id="sndbtn04" onclick="createAudioById('04')">Audio 04</button>

我希望在单击“Audio 01”时播放 01.mp3，以及单击“Audio 02”、“Audio 03”、“Audio 04”按钮的类似动作。而且我希望在点击按钮的时候创建<audio>标签，这样我就可以在不预加载所有内容的情况下节省流量。

所以，我有 JavaScript 代码：

  var audioObj = ;
  function createAudioById(id)
    var p = audioObj[id];
    // alert(1)
    if (p != undefined) 
      alert(2);
      p.play();
      return;
     else 
      alert(3);
      p = new Audio();
      p.addEventListener('canplaythrough', function(e)
        e.currentTarget.removeEventListener('canplaythrough', arguments.callee);
        alert(4);
        p.play();
      );
      p.src = '../snds/'+id+'.mp3';
      audioObj[id] = p;
    
  

但这种行为在移动设备上很奇怪：

在手机 (iPhone) 上：

首先单击button 01 会触发(3)，然后什么也没有发生 - canplaythrough 事件从未被触发并且音频从未播放过 - 与预期不同：(4) 应该被触发并且音频应该被播放; 如果我再次单击该按钮，(2) 将触发并播放音频。但奇怪的是，音频开始播放几秒钟后，(4) 就被触发了。 如果我在播放音频时单击按钮，(2) 会被触发并且没有任何反应，音频会继续播放 - 正如预期的那样； 如果我在音频播放完毕时点击按钮，(2) 将被触发，音频已播放，(4) 永远不会弹出 - 正如预期的那样。

【参考方案1】：

在桌面上：

我不明白为什么这是奇怪的行为。您首先检查名称为“01”的音频是否存在。它没有，所以你创建它，当它完成加载并可以播放时，事件监听器被触发并开始播放。

然后，您在播放时再次按下该按钮。您检查名称为“01”的音频是否存在 - 它确实存在，因为您之前创建了它并且它仍在播放。因此，定义了 p 并且 (2) 触发。音频一直在播放，因为您告诉它播放，它已经在播放了。

然后，当音频停止并按下按钮时，您检查名称为“01”的音频是否存在。它仍然存在——它停止播放了，但它仍然存在，只是因为歌曲结束而暂停了。所以（2）触发器，你告诉它播放，但事件监听器仍在监听，你从未破坏它，所以当它重新下载歌曲时，canplaythrough 被第二次触发。这都是正常的行为。

在移动设备上： 你有完全相同的设置，除了这一次无论出于何种原因 canplaythrough 事件没有触发。我不知道为什么会这样，但这是另一个问题。除此之外，这种行为很容易解释。您创建了新的音频，由于某种原因该事件没有被触发，所以当您再次单击该按钮时，音频仍然存在，从您之前创建它时开始播放并开始播放。然后，当歌曲结束时，音频仍然存在并且仍然有事件侦听器，但是再一次，由于某种原因，事件侦听器根本不起作用，但音频仍然会播放，因为它仍然存在。

【讨论】：

感谢回复，我又试了一次，发现canplaythrough每次调用audioelement.play()都会触发； - 这有点奇怪。无论如何，在这种情况下如何删除事件监听器？您是否知道为什么该事件没有在移动设备上触发？

我不知道为什么不能在移动设备上触发 canplaythrough，但是要删除事件侦听器，只需在事件侦听器触发的函数中添加 e.currentTarget.removeEventListener('canplaythrough')在第一次触发事件侦听器时摆脱它。确保将参数 e 添加到函数开头，如 function handler(e)

谢谢，我已经更新了问题，但是在添加 e.currentTarget.removeEventListener('canplaythrough') 之后，(4) 仍在触发 - 您可以看到我最新代码的已编辑问题。

为了让 e.currentTarget.removeEventListener 工作，函数需要有一个名字，它不能是匿名的。使用函数处理程序（e）

我忘记传递参考了。我只是通过使用e.currentTarget.removeEventListener('canplaythrough', arguments.callee);来解决它，谢谢！