使用html5与js实现音乐播放器

实现效果如下：

1、HTML代码

<div id="music"><div id="container"><h3 id="musicName">一月，银装轻舞-紫竹笛韵</h3><img src="data: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);
}

demo预览效果：musicPlay

使用html5与js实现音乐播放器相关推荐

html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
html+css+js本地音乐播放器，实现可视化音频频谱
效果 html+css+js本地音乐播放器,实现可视化音频频谱前言之前用swing写了个本地音乐播放器(如下图),但是效果一言难尽,界面丑,功能bug也多,唉所以后面又重新用html写了个,界面 ...
通过html5实现简易的音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
电脑端音乐播放器html5,原生js的音频播放器，兼容pc端和移动端（原创）
插件描述:基于原生的音频播放器效果,小巧易用更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式更新时间 ...
[HTML5]简单网页本地音乐播放器
既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器.一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生 ...
原生js html音乐播放器(歌词滚动)
本周学习了js的,用老师教的敲了一个音乐播放器准备工作首先随便找首歌然后用一个小工具扒它的歌词前期准备完成代码部分现在就开始写 html 和 css 了很简单就不解释了直接上代码 h ...
HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...
vue 音乐盒app_基于Vue.js的音乐播放器（Webapp）
概述项目是基于Vue.js,成品是一个移动端的音乐播放器,来源于imooc的实战课程.自己动手实践并加以修改拓展. 项目的大致流程是Vue-cli构建开发环境,分析需求,设计构思,规划目录结构,开始 ...
音乐播放器的设计与实现功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示
本地资源在谷歌浏览器上是无法快进的.这个是重点!!!有很多解决方法,我直接用火狐就ok了 https://www.gaitubao.com/# 改图宝链接用于修改歌曲头像大小标准显示才正常我用的 ...
学习网站整理之3——html5学习之简易音乐播放器制作
为了学点html的东西 ,简单将这个所谓额简单播放器嵌套在我目前整理的网站里,作为随机"主页"的一部分-如上次上次的资料里所写,现在是按照星期的顺序,当打开时,每天都有相应的主页网 ...

使用html5与js实现音乐播放器

使用html5与js实现音乐播放器相关推荐

最新文章

热门文章