js实现网页音乐播放器
本文为大家分享了简单的html，音乐播放器制作代码，供大家参考，具体内容如下
首先第一步找图片资源 音乐资源 放入到img文件夹中
第二步对页面布局进行布置
第三步书写js代码
复制代码运行的时候需要将图片资源，音乐资源换个名称。
运行实现图片的切换，效果如图：
代码如下：
希望各位喜欢！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
background-color:#596653;
}
.yinyue {
width: 300px;
height: 300px;
border: 1px solid aqua;
margin:50px 500px;
}
.bofang {
width: 100px;
height: 100px;
background-color: aqua;
}
.muted ,.play,.prefer,.next{
width: 60px;
height: 30px;
background-color: aquamarine;
text-align: center;
line-height: 30px;
}
#kongzhi ,#shangxia {
margin: 10px 530px;
}
</style>
</head>
<body>
<div id="content">
<img class="yinyue" src="img/yinyue1.jpg" >
<audio src="img/yinyue1.mp3" >
</audio>
<div id="anniu">
<div id="kongzhi">
<button class="muted" type="button" >静音</button>
<img class="bofang" src="img/播放.png" >
<button class="play" type="button" >播放</button>
</div>
<div id="shangxia">
<button class="prefer" type="button">上一首</button>
<span>音量</span>
<input class="volume" type="range" min="0" max="1"step="0.01" />
<button class="next" type="button">下一首</button>
</div>
</div>
</div>
<script type="text/javascript">
var index=0;
var srcs=['img/yinyue1.mp3','img/yinyue2.mp3','img/yinyue3.mp3'];
var imgArr=['img/yinyue1.jpg','img/yinyue2.jpg','img/yinyue3.jpg'];
var audio =document.querySelector("audio");
var playBtn =document.querySelector(".play");
var mutedBtn =document.querySelector(".muted");
var volumnBtn=document.querySelector(".volume");
var bofang= document.querySelector('.bofang');
var prefer =document.querySelector(".prefer");
var nextBtn=document.querySelector(".next");
var yinyue =document.querySelector(".yinyue")
playBtn.onclick=function(){
if(audio.paused===true){
audio.play();
bofang.src='img/播放.png';
audio.value="播放";
}else{
audio.pause();
bofang.src ='img/暂停.png';
audio.value="暂停";
}
}
mutedBtn.onclick=function(){
if(audio.muted==true){
audio.muted=false;
}
else{
audio.muted=true;
bofang.src ='img/静音.png';
}
}
volumnBtn.onchange=function(){
audio.volume=volumnBtn.value;
}
prefer.onclick=function(){
index--;
if(index<0){
index=srcs.length-1;
}
audio.srcs=srcs[index];
yinyue.src=imgArr[index];
}
nextBtn.onclick=function(){
index++;
if(index==srcs.length){
index=0;
}
audio.src=srcs[index];
yinyue.src=imgArr[index];
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现简单音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. 这样看起来有点单调. 我们把它加在网页上试试. 具体效果可以去我的个人网站查看http://tcxqq.top 好了,成品已经展示了接下来,开干吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset=
-
js实现简单音乐播放器
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下 效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节 完整代码(直接拿来用) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>audio功能开发</title> <style> * { margin:0; padding:0 } .music-ra
-
js+audio实现音乐播放器
本文实例为大家分享了js+audio实现音乐播放器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <link rel="shortcut icon" type="image/x-icon" href="img/an.ico&
-
原生JS实现音乐播放器
本文实例为大家分享了JS实现音乐播放器的具体代码,供大家参考,具体内容如下 首先,使用HTML搭好我们的框架结构.这一步为了提高我们代码的可读性,多写注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS音乐播放器</title> <link rel="stylesheet&qu
-
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu
-
Vue.js实现音乐播放器
本文实例为大家分享了Vue.js实现音乐播放器的具体代码,供大家参考,具体内容如下 目录如下: 运行效果如图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" char
-
JS+html5制作简单音乐播放器
本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下 1.HTML <audio> 标签定义声音,比如音乐或其他音频流.其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮. 几个主要的标签如下: <div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src=&qu
-
运用js教你轻松制作html音乐播放器
用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc
-
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
原生JS实现小小的音乐播放器
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到