摘要：
audio的一些基本属性：controls:向用户显示控件，如播放按钮；src:播放音频的url路径；autoplay:当视频就绪后马上播放；loop:重复播放；muted:静音属性；poster:在下载时现实的图像，直到点击播放；paused:判断音频是否已停止；audio的一些基本方法：play()：播放歌曲；pause()：暂停歌曲；load()：重新加载歌曲；大致了解这些属性和方法过后，那我们就开始编写代码吧！
audio的一些基本属性：（通俗的理解）
controls: 向用户显示控件，如播放按钮；
src: 播放音频的url路径；
autoplay: 当视频就绪后马上播放；
loop: 重复播放；
muted: 静音属性；
poster: 在下载时现实的图像，直到点击播放；
paused: 判断音频是否已停止；
audio的一些基本方法：（通俗的理解）
play()：播放歌曲；
pause()：暂停歌曲；
load()：重新加载歌曲；
大致了解这些属性和方法过后，那我们就开始编写代码吧！
html代码：
<!DOCTYPE html>
<html lang="zh">
<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>
.xixi{
position: absolute;
top: 0;
right: 0;
50px;
height: 50px;
}
</style>
</head>
<body>
<!--定义音频，src为你要播放的音乐-->
<audio src="http://t.zoukankan.com/music/music.mp3" ></audio>
<!--img标签为控制音频的一个按钮-->
<img src="http://t.zoukankan.com/imgs/musicBtnOff.png" onclick="play()" />
</body>
</html>js代码：
<script>
functionplay(){
//获取到你所定义的音频标签
var audios = document.getElementById("music");
//获取到img标签
var xixi = document.querySelector(".xixi");
//判断音频是否停止
if(audios.paused){
//如果已停止则播放音频并更换图标
xixi.src = "http://t.zoukankan.com/imgs/musicBtn.png";
audios.play();
}else{
//如果已停止重新加载音频并关闭音频和更换图标
xixi.src = "http://t.zoukankan.com/imgs/musicBtnOff.png";
audios.pause();
audios.load();
}
}
</script>嘻嘻，快去试试吧。。。