audio之点击图标切换音频播放状态以及替换当前图标
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;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!--定义音频，src为你要播放的音乐-->
<audio src="music/music.mp3" id="music" ></audio>
<!--img标签为控制音频的一个按钮-->
<img src="imgs/musicBtnOff.png" class="xixi" onclick="play()" />
</body>
</html>
js代码：
<script>
function play(){
//获取到你所定义的音频标签
var audios = document.getElementById("music");
//获取到img标签
var xixi = document.querySelector(".xixi");
//判断音频是否停止
if(audios.paused){
//如果已停止则播放音频并更换图标
xixi.src = "imgs/musicBtn.png";
audios.play();
}else{
//如果已停止重新加载音频并关闭音频和更换图标
xixi.src = "imgs/musicBtnOff.png";
audios.pause();
audios.load();
}
}
</script>
嘻嘻，快去试试吧。。。
