| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 规定当网页加载时，音频是否默认被加载以及如何被加载。 |
| src | URL | 规定音频文件的 URL。 |
<audio> 标签支持 HTML 的全局属性。https://www.runoob.com/tags/ref-standardattributes.html
<audio> 标签支持 HTML 的事件属性。详细见 https://www.runoob.com/tags/ref-eventattributes.html
点击图片 点击按钮实现播放暂停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.musicDiv{
width:150px;
height: 150px;
background-image: url('./img/1.jpg');
background-size: cover;
/* `cover` 填充整个背景 */
border-radius: 75px;
animation: musicDiv 15s linear infinite;
animation-play-state: paused;
/* 定义默认动画是否执行 暂停 */
}
@keyframes musicDiv {
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="musicDiv" onclick="controlMusic()"></div>
<audio src="./其实都没有.mp3" controls id="music" onplay="onplayMusic()" onpause="onpauseMusic()"></audio>
<dl>
<dt>属性</dt>
<dd>controls 控制音频的播放暂停</dd>
<dt>事件</dt>
<dd>onplay事件代表播放</dd>
<dd>onpause事件代表暂停</dd>
<dt>方法</dt>
<dd>play方法代表播放</dd>
<dd>pause()方法代表暂停</dd>
</dl>
<script>
var music = document.querySelector("#music");
//音乐播放动画跟着播放
var musicDiv =document.querySelector(".musicDiv");
//音乐暂停
function onpauseMusic(){
//animation-play-state转为js时去掉中间的——后面单词首字母大写
musicDiv.style.animationPlayState="paused";
}
//音乐播放
function onplayMusic(){
musicDiv.style.animationPlayState="running";
}
function controlMusic(){
//如果音乐是暂停的，点击则播放，如果是播放的则暂停
if(music.paused){
music.play();
}
else
{music.paused();}
}
</script>
</body>
</html>扩充使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音频标签的使用</title>
<style>
.musicDiv{
width: 150px;
height: 150px;
background-image: url('./img/music-img.jpg');
background-size: cover;
border-radius: 75px;
animation: musicPlay 15s linear infinite;
/* 定义动画默认是否执行 暂停*/
animation-play-state: paused;
}
@keyframes musicPlay{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
#musicTime{
width: 200px;
}
</style>
</head>
<body>
<div class="musicDiv" onclick="controlMusic()"></div>
<div id="controls">
<button type="button" id="btnPlay" onclick="playMusic()">播放</button>
<button type="button" id="btnPlay" onclick="pauseMusic()">暂停</button>
<label for="musicTime">播放进度：</label>
<input type="range" id="musicTime" onchange="controlsMusicTime(this)" min="0" max="100" value="0">
<label for="musicVolume">音量：</label>
<input type="range" id="musicVolume" onchange="controlsMusicVolume(this)" step="0.05" min="0" max="1" value="1">
</div>
<audio src="./其实都没有.mp3" id="music" controls ontimeupdate="onMusicTimeUpdate()" onplay="onplayMusic()" onpause="onpauseMusic()"></audio>
<script>
var music = document.querySelector("#music");
// 音乐播放，动画跟着播放
// 音乐暂停，动画跟着暂停
var musicDiv = document.querySelector(".musicDiv");
// 分别写两个方法 用来控制播放和暂停
// ------------音乐播放----------
function onplayMusic(){
// animation-play-state 转为js写法时，去掉中间的线，后面单词首字母大写 running
musicDiv.style.animationPlayState="running";
}
// ------------音乐暂停----------
function onpauseMusic(){
musicDiv.style.animationPlayState="paused";
}
// 通过图片点击控制音乐播放
function controlMusic(){
// 如果音乐是暂停的，则播放，如果音乐是播放的，则暂停
if(music.paused){
music.play();
}else{
music.pause();
}
}
// 这个方法用来播放音乐
function playMusic(){
music.play();
}
// 这个方法用来暂停音乐
function pauseMusic(){
music.pause();
}
// 音乐播放改变进度条
// currentTime 播放进度
// duration 播放时间
function onMusicTimeUpdate(){
musicTime.value=(music.currentTime/music.duration)*100;
// 通过时间比获取到进度条的值
}
// 控制音量
function controlsMusicVolume(obj){
music.volume=obj.value;
}
// 改变音乐的播放进度
function controlsMusicTime(obj){
music.currentTime=obj.value/100*music.duration;
}
</script>
</body>
</html>