本文摘自PHP中文网,作者V,侵删。
我们先来看下最终的实现效果:
(学习视频分享:html5视频教程)
1、HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 13 | < 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、播放暂停切换效果实现
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 播放
play.onclick = function(){
if(audio.paused){
audio.play();
}
}
// 暂停
pause.onclick = function(){
if(audio.played){
audio.pause();
}
}
|
自动切换下一首
1 2 3 | audio.addEventListener('ended',function(){
next.onclick();
},false);
|
3、歌曲切换时歌曲图片与当前背景也随着改变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // 上一首
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、实现背景图片透明,内容不透明效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #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实现简易音乐播放器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript有哪几种引入方式
使用modernizr探测HTML5/css3新特性的示例代码分享
如何理解html、css、javascript之间的关系?
javascript如何设置width
HTML5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave
如何使用HTML5时钟实现(附代码)
http协议发展过程一览
聊聊javascript中实现抽离公共函数的方法
javascript中数组去重的5种方法是什么
javascript常用数据类型的概念介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5结合javascript实现简易音乐播放器