HTML点击图片播放音乐

       很多小伙伴都会用HTML来编写一些网页，如何让网页变得更有美感，增加一个背景音乐就很有必要了。

这里给大家介绍一个我自己用的方法：点击图片播放音乐，再次点击则停止音乐.
1.我们需要将用到的音频文件导入到我们的网页中

<audio id="music" src="music/yinanping.flac" loop autoplay></audio>

2.赋给图片点击的方法

<img src="images/cql.jpg" onClick="play()" alt="user"> 

3.编写play()方法

<script>
window.onload = function(){ 
     var audio = document.getElementById('music');
         audio.pause();//打开页面时无音乐
}
function play() {
    var audio = document.getElementById('music');
    if (audio.paused) {
        audio.play();
        document.getElementById('musicImg').src="images/play.png";
    }else{
        audio.pause();
        audio.currentTime = 0;//音乐从头播放
        document.getElementById('musicImg').src="images/stop.png";
    }
}
</script>

4.效果图

5.完整样式代码

<div id="fh5co-content-section">
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-6">
            <div class="fh5co-testimonial text-center animate-box">
              <h2>意难平</h2>
              <audio id="music" src="music/yinanping.flac" loop autoplay></audio>

              <figure> 
              <span class="music">点击播放音乐------>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <img src="images/cql.jpg" onClick="play()" alt="user"> 
              </figure>
              <blockquote>
                <p style="font-size: 20px">“穿越 往昔 莲坞边，碧潭 旧影 犹少年，时光迁 梦浅 潋滟错觉，愿执一笔 寄予云梦故人念，意难平 笑问苍天，回首却 不觉已过经年，无别无离 无忧无缘，可还闻得 一声阿羡。”</p>
              </blockquote>
              <span>陈情令</span> </div>
          </div>
         
        </div>
      </div>
    </div>