html5结合javascript实现简易音乐播放器

html5结合javascript实现简易音乐播放器toq码友部落

toq码友部落

我们先来看下最终的实现效果:toq码友部落

(学习视频分享:html5视频教程toq码友部落

0417ba9cda64c8f8b772aabc48e3546.pngtoq码友部落

toq码友部落

1、HTML代码toq码友部落

<div id="music"> <div id="container"> <h3 id="musicName">一月,银装轻舞-紫竹笛韵</h3> <img src=https://www.php.cn/"image/一月,银装轻舞-紫竹笛韵.jpg" id="musicImg"> <audio src=https://www.php.cn/"./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、播放暂停切换效果实现toq码友部落

// 播放play.onclick = function(){ if(audio.paused){ audio.play(); }} // 暂停pause.onclick = function(){ if(audio.played){ audio.pause(); }}

自动切换下一首toq码友部落

audio.addEventListener('ended',function(){ next.onclick();},false);

3、歌曲切换时歌曲图片与当前背景也随着改变toq码友部落

// 上一首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、实现背景图片透明,内容不透明效果toq码友部落

#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教程

以上就是html5结合javascript实现简易音乐播放器的详细内容,更多请关注php中文网其它相关文章!toq码友部落