重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要介绍html5结合javascript实现简易音乐播放器的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司专业为企业提供淮阴网站建设、淮阴做网站、淮阴网站设计、淮阴网站制作等企业网站建设、网页设计与制作、淮阴企业网站模板建站服务,十多年淮阴做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
我们先来看下最终的实现效果:
1、HTML代码
一月,银装轻舞-紫竹笛韵
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结合javascript实现简易音乐播放器的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!