HTML5 audio API事件
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() 暂停
<!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>
<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>
当前时长：<p id="curT"></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;
})
// 设置或返回音频长度
myaudio.currentTime=20;
setInterval(function(){
curT.innerHTML=myaudio.currentTime;
},100)
</script>
</body>
</html>
volume 设置声音
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
// 设置声音
// 加不加引号都可以，范围在0-1
myaudio.volume=0.5;
myaudio.volume=‘0.5‘;
</script>
</body>
</html>audio API事件2
currentSrc 返回当前地址
不能设置，只能获取
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
myaudio.addEventListener("canplay",function(){
console.log(myaudio.currentSrc);
})
</script>
</body>
</html>
ended 音频是否结束，返回布尔值
一般用于状态监听
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
myaudio.addEventListener("ended",function(){
console.log("音频播放结束");
console.log(myaudio.ended);
})
</script>
</body>
</html>
loop 设置音频循环
true表示循环，false表示不循环
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
myaudio.loop=true;
</script>
</body>
</html>playbackRate 音频倍速
默认为1
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
console.log(myaudio.playbackRate);
myaudio.playbackRate=10;
</script>
</body>
</html>
timeupdate 音频播放状态
我测试的时候发现点击了暂停，依然会执行一次音频播放中
音频刚开始还没播放的时候不会执行
<!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>
当前时长：<p id="curT"></p>
<script>
var myaudio=new Audio();
myaudio.src="data/imooc.mp3";
myaudio.addEventListener("timeupdate",function(){
console.log("音频播放中...");
})
</script>
</body>
</html>
controls 默认控件显示
<audio src="data/imooc.mp3" controls></audio>
不同浏览器效果有区别
seeked 音频拖动完成
seeking 音频正在拖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<audio src="data/imooc.mp3" controls id="myaudio"></audio>
<p>seeked:<span id="seekedNum"></span></p>
<p>seeking:<span id="seekingNum"></span></p>
<script>
var seekedN=seekingN=0;
myaudio.addEventListener("seeked",function(){
console.log("seeked");
seekedN++;
seekedNum.innerHTML=seekedN;
})
myaudio.addEventListener("seeking",function(){
console.log("seeking");
seekingN++;
seekingNum.innerHTML=seekingN;
})
</script>
</body>
</html>
volumechange 声音改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<audio src="data/imooc.mp3" controls id="myaudio"></audio>
<script>
myaudio.addEventListener("volumechange",function(){
console.log("声音改变了");
})
</script>
</body>
</html>
audio API事件4
requestFullScreen 全屏
有浏览器前缀
注意只有在HTML里创建的audio标签才可以全屏
自己在js里创建的audio对象不可以全屏
话说回来audio的全屏是 requestFullScreen
video的全屏是 requestFullscreen
两个大小写居然不是一致的，很迷……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<audio src="data/imooc.mp3" controls id="myaudio"></audio>
<button id="btn">全屏</button>
<script>
btn.onclick=function(){
myaudio.webkitRequestFullScreen();//可以全屏
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<!-- <audio src="data/imooc.mp3" controls id="myaudio"></audio> -->
<button id="btn">全屏</button>
<script>
var audio=new Audio();
btn.onclick=function(){
audio.webkitRequestFullScreen();//可以全屏
}
</script>
</body>
</html>
不过想想也是，控件都没有，还扯什么全不全屏……
load 音频重新加载，页面不刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<audio src="data/imooc.mp3" controls id="myaudio"></audio>
<button id="btn">重新加载</button>
<script>
btn.onclick=function(){
myaudio.load();
}
</script>
</body>
</html>另外，替换src属性也能起到重新加载的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
<style>
audio{
width:500px;
}
</style>
</head>
<body>
<audio src="data/imooc.mp3" controls id="myaudio"></audio>
<button id="btn">重新加载</button>
<script>
btn.onclick=function(){
myaudio.src="data/imooc.mp3";
//myaudio.load();
}
</script>
</body>
</html>因此，想要实现重新加载的效果，有两种方法：
一种是load
一种是替换src属性
相关推荐
行吟阁 2020-05-30
STPace 2020-03-14
黎豆子 2020-02-18
一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q
玫瑰小妖 2020-01-24
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19