午后・时光

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

位置: 首页 > 马黑教程[ 发布时间: 2023.3.2  作者: 花飞飞  阅读: 193 ]
十一、在帖子中使用音频媒体(一)


有做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
下一篇: 十二、在帖子中使用音频媒体(二)

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com