1.概述
audio标签常用的音频格式有mp3、ogg、wav
2.音频素材官网
https://www.aigei.com/
爱给网
3.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频</title>
</head>
<body>
<audio src="audio/1.mp3" controls></audio>
<div>
<button class="playBtn">play</button>
<button class="pauseBtn">pause</button>
</div>
</body>
</html>
<script>
//获取音频
var audio = document.querySelector('audio');
//获取开始与暂停按钮
var playBtn=document.querySelector('.playBtn');
var pauseBtn=document.querySelector('.pauseBtn');
//开始
playBtn.onclick = function(){
audio.play();
}
//暂停
pauseBtn.onclick = function(){
audio.pause();
console.log(audio.currentTime); //当前时间
console.log(audio.duration); //总时间
console.log(audio.volume); //声音大小
}
//audio有三个事件
audio.onplay = function(){
document.body.style.background='grey';
}
audio.onpause = function(){
document.body.style.background='red';
}
audio.ontimeupdate = function(){
console.log("当前是时间发生变化");
}
</script>
4.知识点
①audio的属性和视频有区别，poster是没有的。
在谷歌的兼容方面，autoplay是无法自动播放的，但是IE可以。
muted（静音）是有的。
loop（循坏）也是有的。
②audio有2个方法、3个属性、3个事件，与视频的用法一样。
篇章
上一篇：HTML5教程8-视频
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
