audio的一些基本属性：（通俗的理解）
controls: 向用户显示控件，如播放按钮；
src: 播放音频的url路径；
autoplay: 当视频就绪后马上播放；
loop: 重复播放；
muted: 静音属性；
poster: 在下载时现实的图像，直到点击播放；
paused: 判断音频是否已停止；
audio的一些基本方法：（通俗的理解）
play()：播放歌曲；
pause()：暂停歌曲；
load()：重新加载歌曲；
大致了解这些属性和方法过后，那我们就开始编写代码吧！
html代码：
<!DOCTYPE html> <html> <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>
嘻嘻，快去试试吧。。。
随时随地看视频
