html5 中为视频 video 和音频 audio 元素,提供了属性、方法和事件。这两个元素的常用属性上一节我们已经讲过了,本节我们来讲一下这两个元素的方法。
HTML5 中为 video 元素 和 audio 元素提供了一些方法,这些方法可以用于操作 video 元素和 audio 元素,下面我们来看一下:
方法 | 描述 |
---|---|
paly() | 开始播放音频、视频 |
pause() | 暂停当前播放的音频、视频 |
load() | 重新加载音频、视频元素 |
addTextTrack() | 向音频、视频添加新的文本轨道,所有主流浏览器都不支持此方法 |
canPlayType() | 检测浏览器是否能播放指定的音频、视频类型 |
其中 paly() 方法和pause() 方法可以用于视频、音频的开始播放和暂停播放,load() 方法用于重新加载视频和音频,下面我们来看一下这些方法的使用。
在某段音频的下方创建三个按钮,分别是播放音频、暂停音频、重新加载。
首先我们先插入一段音频,代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<div>
<audio id="myaudio" controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>
</div>
</body>
</html>
此时音频是可以正常播放的,但我我们要实现的是通过按钮来控制音频的播放和暂停,所以我们要在音频的下方创建三个按钮:
<div style="margin-top:20px ;">
<button type="button">播放音频</button>
<button type="button">暂停音频</button>
<button type="button">重新加载</button>
</div>
这三个按钮就是用于控制音频的播放、暂停和重新加载的按钮。要实现这三个功能其实很简单,只需要调用上面讲到的三个方法即可,在 JavaScript 中通过 getElementById() 方法来获取音频对象的引用:
var myAudio = document.getElementById("myaudio");
然后通过这个引用对象 myAudio 来调用三个方法:
myAudio.play();
myAudio.pause();
myAudio.load();
但是此时这三个方法和上面三个按钮之间没有任何关联,所以我们要想办法让它们关联起来。我们可以通过给按钮绑定 onclick 点击事件的方法,当鼠标点击按钮时,就会触发对应的方法,完整的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<div>
<audio id="myaudio" controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>
</div>
<div style="margin-top:20px ;">
<button onclick="palyAudio()" type="button">播放音频</button>
<button onclick="pauseAudio()" type="button">暂停音频</button>
<button onclick="loadAudio()" type="button">重新加载</button>
</div>
<script>
var myAudio = document.getElementById("myaudio");
function palyAudio(){
myAudio.play();
}
function pauseAudio(){
myAudio.pause();
}
function loadAudio(){
myAudio.load();
}
</script>
</body>
</html>
这样我们分别点击页面中的三个按钮,就可以实现播放音频、暂停音频、重新加载音频的功能了。
原本笔者打算将这件工作交给服务端去完成,但考虑,其实无论是前端还是后台,所做的工作是差不多的,而且交给服务端还需要再额外走一个上传、下载音频的流程,这不仅增添了服务端的压力,而且还有网络流量的开销
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还可以在网页上控制播放声音。本文介绍了一些技巧。实际上它并不是真正的 hack,而是针对 HTML 和 CSS 的严格实现
JavaScript中可以通过Audio对象的volume属性来控制音频音量。volume属性设置或返回音频的音量,从0.0(静音)到1.0(最大声)。
WebRTC打开麦克风,获取音频,在网页上显示音量。先从播放音频入手。准备一个现成的音频文件。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!