十一、在帖子中使用音频媒体(一）


有做HTML帖子经历的朋友，都知晓简写性的 audio 音频标签，代码并不复杂：


<audio src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>


src 参数给 audio 引入音频媒体；controls 参数是 audio 操控界面，不要时播放器没有播放界面；loop 参数表示循环播放，删掉此属性时表明不重复播放；autoplay 参数表示自动播放，没有此参数时不自动播放。在 HTML 代码里，后面三个参数或称属性，其值就是参数或属性自身的名称，若用 JS 控制，则值可以为 true（真） 和 false（假）、也可用参数名称做值但不建议。


和其他标签一样，audio 标签也应当有 id 或 类（class）标识，便于CSS对之指定样式、JS对之进行交互操作。所以，上面的 audio 标签，应加入 id="myaud" 或 class="myaud" 之类的标识语句（二选一）。


<audio id="myaud" src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>
<audio class="myaud" src="音频URL" controls="controls" loop="loop" autoplay="autoplay"></audio>


对于 audio 标签，CSS 要做和能做的不多。如果界面可视，定位、简单修饰便可：


#myaud {
        position: absolute;
        left: 20px;
        bottom: 20px;
        outline: none;
}


加载音频除了上面的HTML实体标签方法，还可以使用JS来实现，至少有两种常用的实现方式：


方法一：加载 audio 对象


<script>


let myaud  = new Audio();
myaud.src = '音频地址';
myaud.loop = 'true';
myaud.autoplay = true;


</script>


这里，先建立一个新 audio 对象的实例 myaud，然后针对 myaudo 做必要的属性设置：指定 src，设置循环播放、自动播放。


方法二：追加 audio 元素


追加元素法需要一个宿主，比如 id="papa" 的 div 就可以：


<script>


let myaud  = document.createElement('audio');
myaud.src = '音频地址';
myaud.loop = 'true';
myaud.autoplay = true;
papa.appendChild(myaud);


</script>


此法，需要使用 document 的 createElement 方法创建一个 HTML 元素标签，本例创建的是 audio 标签，并将句柄授权给变量 myaud，myaud 就成为了一个 audio 元素实例。然后和前例一样，设置所需属性，最后令 papa 宿主元素追加 myaud 即 audio 元素。


当 audio 标签的操控界面不可见，JS 对 audio 的管理就显得额外重要且必不可少。JS 总是要通过“代理人”去操纵对象。“代理人”即为元素的操作句柄，或可以理解为原本标签（例如audio）的实例变量（如上两例的 myaud）对象。前面说用 HTML 插入播放器建议加入 id 或 class 语句，就是基于如此用意——JS 操纵 audio 的依据，然后需要声明一下操作句柄：


let myaud = document.querySelector('#myaud'); // 针对 id="myaud"
let myaud = document.querySelector('.myaud'); // 针对 class="myaud"


当标签使用了 id="名称" 这样的身份标识语句，可以不要上面的声明，因为id号是唯一的，在js里可以直接通过名称对之进行操作，现代浏览器不会出现任何异常。而针对 class="名称" 的标签，需要上述对应的声明，该声明仅对第一个出现的标签有效。


无界面时，对 audio 的播放暂停也需要通过JS实现：


myaud.play(); //播放
myaud.pause(); //暂停


以上指令需要依托于某个实体元素，例如 id="btnPlay" 和 id="btnPause" 的按钮，它们单击时播放和暂停播放：


btnPlay.onclick = () => myaud.play();
btnPause.onclick = () => myaud.pause();


本节重点：在帖子中添加音频媒体的HTML方式和两种JS方式。对音频的交互控制，需要使用JS实现。

前一篇: 十、关键帧动画@keyframes及其调用方法animation
下一篇: 十二、在帖子中使用音频媒体（二）