站長資訊網
我們先來看下最終的實現效果：
（學習視頻分享：html5視頻教程）
1、HTML代碼
<div id="music"> <div id="container"> <h3 id="musicName">一月，銀裝輕舞-紫竹笛韻</h3> <img src="image/一月，銀裝輕舞-紫竹笛韻.jpg" id="musicImg"> <audio src="./music/一月，銀裝輕舞-紫竹笛韻.mp3" controls id="audio"></audio> <div class="btn"> <button id="play">play</button> <button id="pause">pause</button> <button id="prev">prev</button> <button id="next">next</button> </div> </div> </div>
登錄后復制
2、播放暫停切換效果實現
// 播放 play.onclick = function(){ if(audio.paused){ audio.play(); } } // 暫停 pause.onclick = function(){ if(audio.played){ audio.pause(); } }
登錄后復制
自動切換下一首
audio.addEventListener('ended',function(){ next.onclick(); },false);
登錄后復制
3、歌曲切換時歌曲圖片與當前背景也隨著改變
// 上一首 prev.onclick = function(){ num = (num + len - 1) % len; audio.src = './music/' + music[num] + '.mp3'; musicName.innerHTML = music[num]; bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)'; musicImg.src = './image/' + music[num] + '.jpg'; audio.play(); } // 下一首 next.onclick = function(){ num = (num + 1) % len; audio.src = './music/' + music[num] + '.mp3'; musicName.innerHTML = music[num]; bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)'; musicImg.src = './image/' + music[num] + '.jpg'; audio.play(); }
登錄后復制
4、實現背景圖片透明，內容不透明效果
#music { width: 500px; height: 500px; border-radius: 10px; margin: 20px auto; position: relative; background: url(./image/一月，銀裝輕舞-紫竹笛韻.jpg) no-repeat; background-size: cover; text-align: center; } #container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 500px; height: 500px; text-align: center; background:rgba(255,255,255,0.6); }
登錄后復制
相關推薦：html5教程
