评论资讯 [ 总 913 则 ]
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
友情链接
网站统计
十一、在帖子中使用音频媒体(一)
十一、在帖子中使用音频媒体(一)
有做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实现。
有做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实现。
发表评论:
评论列表 [0条]