HTML5+JS实现简易的音乐播放器

HTML5+JS实现简易的音乐播放器

播放器实现的功能

播放/暂停音乐

切换歌曲，上/下一首歌

音量最大或静音

音乐播放时间实时变化

进度条拖拽

歌曲图片切换

播放器效果展示

代码展示

html

<div class="musicBox" id="musicBox"><audio src="music/赵季平-门楼.mp3"  id="music">当前浏览器不支持audio</audio><div class="leftControl"></div><div id="mainControl" class="mainControl"></div><div id="stopControl" class="stopControl" style="display:none"></div><div class="rightControl"></div><div class="processControl" ><div id="songName" class="songName">赵季平-门楼</div><div id="songTime" class="songTime">00:00&nbsp;|&nbsp;00:00</div><div id="process" style="width:500px" class="process"></div><div id="processYet" class="processYet"></div></div><div class="voiceEmp"></div><div id="voidProcess" class="voidProcess" style="width:66px"></div><div class="voidProcessYet"  id="voidProcessYet"></div><div class="voiceFull"></div>
</div>
<div class="list"><!-- 插图 --><img src="data:images/1.png" width="300px" id="pictures" ><!-- 歌单 --><ul id="songList"></ul>
</div>

CSS样式

.musicBox {font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #595959;/*设置边框的弧度值，为3px*/-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;/*阴影*/text-shadow: 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow: 10px 10px 25px #ccc;-moz-box-shadow: 10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;/*透明度*/opacity: 0.9;/*基本性质*/padding: 2px 5px;position: absolute;z-index: 9;border-width: 1px;border-style: solid;border-color: #488BF0;width: 775px;height: 50px;border-radius: 10px;
}.leftControl {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) left 2px no-repeat;margin-right: 8px;margin-left: 10px;
}.leftControl:hover {background: url(../images/sk-dark.png) left -30px no-repeat;
}.mainControl {width: 25px;padding: 10px 15px 5px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) -80px -130px no-repeat;
}.mainControl:hover {background: url(../images/sk-dark.png) -80px -166px no-repeat;
}.rightControl {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) left -62px no-repeat;margin-right: 8px;
}.rightControl:hover {background: url(../images/sk-dark.png) left -93px no-repeat;
}.processControl {width: 500px;padding: 5px 10px 10px 10px;float: left;height: 20px;margin-right: 12px;color: #ffffff;
}.processControl .songName {float: left;
}.processControl .songTime {float: right;
}.processControl .process {width: 500px;float: left;height: 2px;cursor: pointer;background-color: #000000;margin-top: 7px;
}.processControl .processYet {width: 0px;position: absolute;height: 2px;left: 131px;top: 30px;cursor: pointer;background-color: #00aaff;
}.voiceEmp {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 17px;background: url(../images/sk-dark.png) -28px -180px no-repeat;margin-right: 2px;
}.voiceEmp:hover {background: url(../images/sk-dark.png) -28px -212px no-repeat;
}.voidProcess {width: 66px;height: 2px;cursor: pointer;background-color: #000;float: left;margin-top: 19px;margin-right: 6px;
}.voidProcessYet {width: 66px;position: absolute;height: 2px;left: 675px;top: 21px;cursor: pointer;background-color: #7A8093;
}.voiceFull {width: 0px;padding: 10px 10px 10px 10px;float: left;height: 17px;background: url(../images/sk-dark.png) -28px -116px no-repeat;
}.voiceFull:hover {background: url(../images/sk-dark.png) -28px -148px no-repeat;
}.stopControl {width: 14px;padding: 10px 10px 5px 10px;float: left;height: 20px;background: url(../images/sk-dark.png) -50px -130px no-repeat;margin-right: 16px;
}.stopControl:hover {background: url(../images/sk-dark.png) -50px -165px no-repeat;
}.list{width: 700px;height: 500px;background-color: #ffd47d;padding-top: 70px;margin-left: 20px;
}
#songList{font-size: 18px;font-weight: bold;color: #FFFFFF;
}
#songList li{margin-top: 5px;
}
#songList li:hover{color: #aa00ff;
}

// 获取音频元素
let music
if(window.HTMLAudioElement){music = document.querySelector('#music');// 播放按钮
}
// 播放按钮
let mainControl = document.querySelector("#mainControl");
// 暂停
let stopControl = document.querySelector("#stopControl");
// 快退,快进，
let leftControl = document.querySelector(".leftControl");
let rightControl = document.querySelector(".rightControl");
// 音量调节
let voiceEmp = document.querySelector('.voiceEmp');
let voiceFull = document.querySelector('.voiceFull');let songName = document.querySelector("#songName");
let process = document.querySelector("#process");
let pictures = document.querySelector("#pictures");
let songList = document.getElementById("songList");mainControl.addEventListener('click',function(){// 播放音乐music.play();mainControl.style.display='none';stopControl.style.display='';timeSpan();
})stopControl.addEventListener('click',function(){// 暂停音乐music.pause();mainControl.style.display='';stopControl.style.display='none';
})
// 播放时间前进或后退
// leftControl.addEventListener('click',function(){//  // console.log(music.currentTime);
//  music.currentTime -= 1.0;
//  // console.log(music.currentTime);
// })// rightControl.addEventListener('click',function(){//  // console.log(music.currentTime);
//  music.currentTime += 1.0;
//  // console.log(music.currentTime);
// })voiceEmp.addEventListener('click',function(){music.volume = 0;
})voiceFull.addEventListener('click',function(){music.volume = 1;
})// 格式化时间
function timeDispose(time){let minutes = parseInt(time/60);let seconds = parseInt(time%60);minutes = minutes>10?minutes:"0"+minutes;seconds = seconds>10?seconds:'0'+seconds;return minutes+':'+seconds;
}
// 展示时间
function timeSpan(){setInterval(function(){let songTime = document.querySelector("#songTime");let currenttime = music.currentTime;let totaltime = music.duration;songTime.innerHTML = timeDispose(currenttime)+"|"+timeDispose(totaltime);let processLenth =(currenttime/totaltime)*getWidth("#process");document.querySelector('#processYet').style.width = processLenth+'px';},1000);}// 获取长度
function getWidth(domId){let dom = document.querySelector(domId);let domLenth = dom.style.width;let domLenthInt = domLenth.split('px')[0];return domLenthInt;
}// 切歌
let songs = [{mp3:'music/赵季平-门楼.mp3',name:'赵季平-门楼',tu:'images/1.png',},{mp3:'music/露露娜Ruruna - 夏 日 蒸 汽 波Say So(Japanese_Ver).mp3',name:'夏日蒸汽波SaySo',tu:'images/2.png',},{mp3:'music/趴熊 - スパイス（香辛料）（Cover 东京カランコロン）.mp3',name:'香辛料（Cover 东京カランコロン）',tu:'images/3.png',},{mp3:'music/神前暁 (こうさき さとる) - いつもの風景から始まる物語 (从老风景开始的故事).mp3',name:'从老风景开始的故事',tu:'images/10.png',},{mp3:"music/Tenkitsune - Yoshi's New Story.mp3",name:"Yoshi's New Story",tu:'images/5.png',},
]// 将歌名显示到列表上
for (var i =0; i < songs.length; i++) {songList.innerHTML += '<li>' + songs[i].name + '</li>';
}//切歌函数
let changeMusic=function (index) {//换歌曲music.src=songs[index].mp3;//换名称songName.innerHTML=songs[index].name;pictures.src=songs[index].tu;
};
let index=0;//当前播放歌曲索引
//切歌
leftControl.addEventListener("click",function (event) {index--;if(index<=-1){index=songs.length-1;}changeMusic(index);
});
rightControl.addEventListener("click",function (event) {index++;if(index>songs.length-1){index=0;}changeMusic(index);
});
// 播放完毕，自动下一首music.addEventListener("ended",function(){rightControl.click();});
process.addEventListener("click",function (event) {let x=event.offsetX;//获取鼠标所在位置let bfb=x/610*100;processYet.style.width=bfb+"%";music.currentTime=music.duration*+bfb/100;
});

HTML5+JS实现简易的音乐播放器相关推荐

HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
通过html5实现简易的音乐播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
Vue3实现简易的音乐播放器组件
前言用Vue3实现一个简易的音乐播放器组件其效果图如下所示: 实现这个组件需要提前做的准备: 引入ElementUI 引入字节跳动图标库一张唱见图片将要播放的音乐上传到文件服务器上,并提供一个 ...
前端----利用html,css,js自制有趣的音乐播放器
最近在学前端,然后做了一个简易的音乐播放器,原本只是一个静态的网页,用a标签实现链接,embed标签引入mv,audio标签实现音乐播放,右边的marquee标签实现歌词滚动但是总觉得还不够,就加上了 ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
Python：通过网络爬虫实现一个简易控制台音乐播放器
hello,大家好,我是wangzirui32,今天我们来学习如何通过网络爬虫实现一个简易控制台音乐播放器,开始学习吧! 1. 项目结构及库准备 app.py为项目入口程序,download.py为音 ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
使用python加PyQt5，利用QMediaPlayer写一个简易的音乐播放器（进度条拖动，音量改变，播放停止切换，歌曲列表））
当你学习了python之后,总想着利用它去做些什么,无论是制作小工具还是小游戏,都是一种锻炼. 那么,利用python加上PyQt5写一个简单的音乐播放器,可能会是一个有趣的体验. 下面我会分享一下如 ...

HTML5+JS实现简易的音乐播放器

播放器实现的功能

播放器效果展示

代码展示

HTML5+JS实现简易的音乐播放器相关推荐

最新文章

热门文章