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>