HTML5自定义mp3播放器源码
导读：收集整理的这篇文章主要介绍了HTML5自定义mp3播放器源码，觉得挺不错的，现在分享给大家，也给大家做个参考。 audio对象src兼容.ogg .wav .mP3<audio controls src='data/imoo...
收集整理的这篇文章主要介绍了HTML5自定义mp3播放器源码，觉得挺不错的，现在分享给大家，也给大家做个参考。 audio对象
src兼容.ogg .wav .mP3
audio controls src='data/imooc.wav'>
/audio>
width autoplay loop muted静音
audio controls src='data/imooc.wav' autoplay loop width='500' height='500' muted>
/audio>
播放play()
VAR myAudio = new Audio();
myAudio.src = 'data/imooc.wav';
myAudio.play();
BTn.onclick = function(){
myAudio.play();
}
;
暂停pause()
pauseNode.onclick = function(){
myAudio.pause();
}
;
当前播放的时间currentTime
音频总时长duration
//返回音频的总长度 myAudio.addEventListener('canplay',function(){
durationNode.innerHTML = myAudio.duration;
}
);
//更新当前播放的时间 setInterval(function(){
currentNode.innerHTML = myAudio.currentTime;
}
,100);
音频源currentSrc
var myAudio = new Audio();
myAudio.src = 'data/imooc.mp3';
console.LOG(myAudio.currentSrc);
loop循环
myAudio.loop = true;
音频播放结束ended
myAudio.addEventListener('ended',function(){
console.log('音频播放结束');
console.log(myAudio.ended) }
);
重新加载
loadBtn.onclick = function(){
myAudio.load();
}
;
跳转到新的播放位置seeked / seeking
myAudio.addEventListener('seeked',function(){
console.log('seeked');
}
);
myAudio.addEventListener('seeking',function(){
console.log('seeking');
sekingNum++;
seekingNum.innerHTML = sekingNum;
}
);
playbackRate设置当前播放速度
myAudio.playbackRate = '15';
console.log(myAudio.playbackRate)全屏requestFullScreen
btnScreen.onclick = function(){
myAudio.webkitRequestFullScreen();
}
loop 循环
myAudio.loop = true;
volumechange音量改变
myAudio.addEventListener('volumechange',function(){
console.log('音频的声音改变了') }
);
timeupdate音频正在播放状态
myAudio.addEventListener('timeupdate',function(){
console.log('音频正在播放中...') }
)自定义mp3播放器
放图
!doctyPE html>
html>
head>
meta charset="utf-8">
tITle>
/title>
style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.outerNode{
width: 505px;
height: 406px;
position: absolute;
left: 50%;
top: 50%;
margin: -204px 0 0 -253.5px;
border: 1px solid #a6a18d;
border-radius:8px;
box-shadow: 0 0 16px #a6a18d;
}
.innerNode{
width: 503px;
height: 405px;
border-top:1px solid #e1d1b9;
border-left:1px solid #ceccbf;
border-radius: 8px;
overflow: hidden;
border-right:1px solid #ceccbf;
}
.topNode{
width: 100%;
height: 198px;
border-bottom: 1px solid #787463;
background: url(music/pic/fmt01.jpg) center center;
background-size:cover;
transition:.7s;
position: relative;
}
.lineNode{
width: 100%;
height: 46px;
border-top: 1px solid #f9f7ee;
border-bottom: 1px solid #a29d8a;
background: url(musicimage/linebg.jpg) repeat-x;
}
.PRogressNode{
width: 440px;
height: 18px;
float: left;
margin:13px 0 0 28px;
background: url(musicimage/progressbg.jpg) repeat-x;
position: relative;
}
.progressNode .progressleft{
width: 7px;
height: 100%;
position: absolute;
left: 0;
background: url(musicimage/leftNode.jpg);
}
.progressNode .progressright{
width: 7px;
height: 100%;
position: absolute;
right: 0;
background: url(musicimage/rightNode.jpg);
}
.bottomNode{
width: 100%;
height: 157px;
border-top: 1px solid #a29d8a;
background: url(musicimage/bottombg.jpg) repeat-x;
position: relative;
}
.lastNode{
width: 75px;
height: 74px;
position: absolute;
background: url(musicimage/lastBg.png) no-repeat;
left: 118px;
top: 39px;
cursor: pointer;
}
.playNode{
width: 95px;
height: 94px;
position: absolute;
background: url(musicimage/playNode.png) no-repeat;
left: 202px;
top: 29px;
cursor: pointer;
}
.nextNode{
width: 75px;
height: 74px;
background: url(musicimage/rightbg.png) no-repeat;
position: absolute;
left: 306px;
top: 39px;
cursor: pointer;
}
.volumeNode{
width: 37px;
height: 32px;
background: url(musicimage/volume.png) no-repeat;
position: absolute;
right: 43px;
top: 58px;
cursor: pointer;
}
.no_volumeNode{
width: 37px;
height: 32px;
background: url(musicimage/no_volume.png) no-repeat;
position: absolute;
right: 43px;
top: 58px;
cursor: pointer;
}
.trueLine{
position: absolute;
left: 3px;
top: 2px;
height: 12px;
width: 0%;
background: url(musicimage/green_bg.png) repeat-x;
border-radius: 6px;
border-right: 1px solid #787463;
}
.musicName{
color: white;
position: absolute;
bottom: 2px;
left: 5px;
}
/style>
/head>
body>
!-- outerNode 最外层的元素 -->
div class='outerNode'>
!-- innerNode 内层元素 -->
div class='innerNode'>
!-- topNode 封面图元素 -->
div class='topNode'>
!-- 音乐名称 -->
div class='musicName'>
/div>
/div>
!-- lineNode 进度条元素 -->
div class='lineNode'>
!-- 进度条-->
div class='progressNode'>
div class='progressleft'>
/div>
div class='progressright'>
/div>
!-- 真正的进度条 -->
div class='trueLine'>
/div>
/div>
/div>
!-- bottomNode 空间元素 -->
div class='bottomNode'>
!-- lastNode 上一曲的按钮-->
div class='lastNode'>
/div>
!-- playNode 播放暂停的按钮 -->
div class='playNode'>
/div>
!-- nextNode 下一曲的按钮 -->
div class='nextNode'>
/div>
!-- volumeNode 静音或非静音的按钮-->
div class='volumeNode'>
/div>
/div>
/div>
/div>
script type="text/javascript">
//播放暂停的按钮 //playBln 控制播放暂停的布尔值 var playBtn = document.querySelector('.playNode'), playBln = true, //控制声音的按钮 //volumeBln 控制声音的布尔值 volumeNode = document.querySelector('.volumeNode'), volumeBln = true, //进度条的选择器 trueLine = document.querySelector('.trueLine'), //进度条外层的元素 progressNode = document.querySelector('.progressNode'), //最外层元素 outerNode = document.querySelector('.outerNode'), //选择一下封面背景 topNode = document.querySelector('.topNode'), //下一首歌的按钮 nextNode = document.querySelector('.nextNode'), //上一首歌的按钮 lastNode = document.querySelector('.lastNode'), //音乐名称 musicName = document.querySelector('.musicName');
//给播放器添加js //创建audio对象 var myAudio = new Audio();
//给audio对象一个 src //所有的数据存在数组里面 let allMusic = [{
'MusicSrc':'music/mus/AcousticGuitar1.mp3', 'MusicPic':'music/pic/fmt01.jpg', 'MusicName':'AcousticGuitar1' }
,{
'MusicSrc':'music/mus/AmazingGrace.mp3', 'MusicPic':'music/pic/fmt02.png', 'MusicName':'AmazingGrace' }
,{
'MusicSrc':'music/mus/FeelsGood2B.mp3', 'MusicPic':'music/pic/fmt03.jpg', 'MusicName':'FeelsGood2B' }
,{
'MusicSrc':'music/mus/FunBusyIntro.mp3', 'MusicPic':'music/pic/fmt04.jpg', 'MusicName':'FunBusyIntro' }
,{
'MusicSrc':'music/mus/GreenDaze.mp3', 'MusicPic':'music/pic/fmt05.jpg', 'MusicName':'GreenDaze' }
,{
'MusicSrc':'music/mus/Limosine.mp3', 'MusicPic':'music/pic/fmt06.jpg', 'MusicName':'Limosine' }
],Index = 0;
myAudio.src = allMusic[Index].MusicSrc;
//给封面赋值 topNode.style.backgroundImage = 'url('+allMusic[Index].MusicPic+')';
//给音乐名称 musicName.innerHTML = allMusic[Index].MusicName;
//谷歌浏览器不允许直接play //myAudio.play();
//播放暂停的事件 playBtn.onclick = function(){
//myAudio.play();
playBln = !playBln;
if(playBln == false){
myAudio.play();
}
else{
myAudio.pause();
}
}
;
//声音的事件 volumeNode.onclick = function(){
volumeBln = !volumeBln;
if(volumeBln == false){
myAudio.volume = 0;
this.classname = 'no_volumeNode';
}
else{
myAudio.volume = 1;
this.className = 'volumeNode';
}
}
;
//播放时 进度条的长度控制计算 myAudio.addEventListener('timeupdate',function(){
trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 + '%';
}
);
//点击progressNode元素 让进度条直接到达这个位置 progressNode.onclick = function(e){
var ev = e || event;
//算法 就是 算出 点击的位置 在 外层进度条的 多少像素 //需要一个鼠标坐标点 减去 外层元素的 offsetLeft 和 最外层元素的offsetLeft // 320秒 * 0.50 = 160秒 myAudio.currentTime = myAudio.duration * ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth);
trueLine.style.width = ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth) * 100 + '%';
}
;
//下一首歌的事件 nextNode.onclick = function(){
Index ++;
if(Index == allMusic.length){
Index = 0;
}
MusicPlayFn();
}
;
//音乐播放的函数 function MusicPlayFn(){
myAudio.src = allMusic[Index].MusicSrc;
myAudio.currentTime = 0;
trueLine.style.width = '0%';
if(playBln == false){
myAudio.play();
}
else{
myAudio.pause();
}
//给封面赋值 topNode.style.backgroundImage = 'url('+allMusic[Index].MusicPic+')';
//给音乐名称 musicName.innerHTML = allMusic[Index].MusicName;
}
//上一首歌的点击事件 lastNode.onclick = function(){
Index --;
if(Index == -1){
Index = allMusic.length-1;
}
MusicPlayFn();
}
;
/script>
/body>
/html>
总结
以上所述是小编给大家介绍的HTML5自定义mp3播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5自定义mp3播放器源码
本文地址： https://pptw.com/jishu/586020.html