本文介绍了HTML5 audio API中的关键事件，包括play、pause、duration、canplay、currentTime、volume等，以及如何监听音频状态，如ended、loop、playbackRate。同时，讨论了controls属性在不同浏览器的表现，seeked和seeking事件的差异，以及volumechange事件。最后提到了audio的全屏方法和重新加载音频的两种方式。
audio API 事件
play() 视频播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style> audio{ width:500px;
}
</style>
</head>
<body>
<input type="button" value="播放" id="ipt">
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
ipt.onclick=function(){
myaudio.play();
} </script>
</body>
</html>
pause() 暂停
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style> audio{ width:500px;
}
</style>
</head>
<body>
<input type="button" value="播放" id="ipt">
<input type="button" value="暂停" id="pau">
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
ipt.onclick=function(){
myaudio.play();
}
pau.onclick=function(){
myaudio.pause();
} </script>
</body>
</html>
duration 返回音频总长度
canplay 音频加载完毕，可以播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style> audio{ width:500px;
}
</style>
</head>
<body>
<input type="button" value="播放" id="ipt">
<input type="button" value="暂停" id="pau">
<br>
<br> 时长：<p id="dura"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
ipt.onclick=function(){
myaudio.play();
}
pau.onclick=function(){
myaudio.pause();
}
myaudio.addEventListener("canplay",function(){
dura.innerHTML=myaudio.duration;
}) </script>
</body>
</html>
currentTime 设置和获取音频的当前播放长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<
最低0.47元/天 解锁文章
扫一扫
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
