十二、在帖子中使用音频媒体（二）


本节将重点讨论音乐的自动播放问题。


上节我们学习了 JS 对 audio 的控制，JS 是通过“代理人”即 audio 元素的操作句柄 myaud 来达成各类操作，本节延续使用 myaud 操作标识。


我们已经知道，HTML 中的 audio 标签，设置参数 autoplay="autoplay" 即可实现音乐的自动播放，或在 JS 中 通过语句 myaud.autoplay = true 来实现相同的功能。但我们应该还知道，现代浏览器出于我们或许不能理解的原因，它们并不支持打开一张 web 页就自动播放音乐或视频媒体。没错，很多朋友的浏览器已经支持媒体的自动播放，但那是私己的设置结果，默认情况下浏览器是不会自动播放音乐（或视频媒体）的。这等于说，autoplay="autoplay" 或 myaud.autoplay = true 并不能保证我们预设的音乐（或视频）是可以自动播放的，换言之，浏览器在默认设置的情况下，我们的 autoplay 设置可能是无效的。


那么，在JS里，可不可以加入 myaud.play() 来播放音乐？可以，这是驱动 myaud 播放的命令，不过遗憾的是，它得有个宿主，比如按钮或窗体甚至是body，它们之上的鼠标单击或鼠标按下事件真实发生了才能驱动音乐的播放，鼠标经过事件都不能触发 audio 的自动播放。


虽然技术上可以绕过浏览器的限制，但要在帖子里实现那是难上加难。所以，面对现实，我们要处理音频媒体不能自动播放的情况。


如果帖子没有用到JS，那么，明智的做法是在 audio 标签中使用 controls="controls" 参数，这样，当 autoplay 失效时，audio 界面上的操作按钮可以提供手动播放音乐的机会。


如果帖子用到JS，则无需令 audio 丑陋的界面污染我们精美的帖子，我们可以通过我们设计的按钮替代 audio 的播放暂停按钮：


html:


<input id="btnPlay" type="button" value="播放" />


js:


btnPlay.onclick = () => myaud.paused ? myaud.play() : myaud.pause();


JS代码里我们使用了三元运算语法糖，通过判断 myaud 的暂停与否来决定 myaud 应执行什么命令，即是播放还是暂停。这行代码能完美工作：如果浏览器阻止了 autoplay，则 audio 处于没有播放的状态，myaud.paused 为真，若不阻止，则音乐播放中，myaud.paused 为假；同理，访问者手动点击过 btnPlay 按钮也产生相同的效果。


但是还有一个问题，按钮的名称（或状态）要具备友好性，能让访问者知道这个按钮下一次点击的作用，不能总是显示“播放”的状态。我们可以监听 audio 的两个状态，playing 和 pause，当它们出现时，分别设定按钮的名称或状态：


myaud.addEventListener('playing', () => btnPlay.value = '暂停');
myaud.addEventListener('pause', () => btnPlay.value = '播放');


这样，音乐暂停时，按钮的名称是播放，反之，按钮的名称是暂停。这个交互也可以通过更换图片、播放CSS关键帧动画与否等方式来展现按钮与音乐播放暂停的对应状态，使得帖子的交互功能更为生动有趣。

前一篇: 十一、在帖子中使用音频媒体(一）
下一篇: 十三、在帖子中使用视频媒体