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(); };暂停pau()
paunode.onclick = function(){ 应然与实然 myaudio.pau(); };当前播放的时间currenttime
音频总时长duration
//返回音频的总长度 myaudio.addeventlistener('canplay',function(){ durationnode.innerhtml = myaudio.duration; }); //更新当前播放的时间 tinterval(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
myaudi郑重近义词o.addeventlistener('ended',function(){ console.log('音频播放结束'); console.log(myaudio.ended) });重新加载
loadbtn.onclick = function(){ myaudio.load(); };跳转到新的播放位置eked / eking
myaudio.addeventlistener('eked',function(){ console.log('eked'); }); myaudio.addeventlistener('eking',function(){ console.log('eking'); kingnum++; ekingnum.innerhtml = kingnum; });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 chart="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'><!-- 音乐名称 --><di欧美经典v 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.querylector('.playnode'),playbln = true,//控制声音的按钮//volumebln 控制声音的布尔值volumenode = document.querylector('.volumenode'),volumebln = true,//进度条的选择器trueline = document.querylector('.trueline'),//进度条外层的元素progressnode = document.querylector('.progressnode'),//最外层元素outernode = document.querylector('.outernode'),//选择一下封面背景topnode = document.querylector('.topnode'),//下一首歌的按钮nextnode = document.querylector('.nextnode'),//上一首歌的按钮lastnode = document.querylector('.lastnode'),//音乐名称musicname = document.querylector('.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',中秋节300字作文以上'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 == fal){myaudio.play();}el{myaudio.pau();}};//声音的事件volumenode.onclick = function(){volumebln = !volumebln;if(volumebln == fal){m熟睡的妈妈yaudio.volume = 0;this.classname = 'no_volumenode';}el{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;//算法 就是 算出 点击的位置 在 外层进度条的 多少像素//需要一个鼠标坐标点 减去 外层元素的 offtleft 和 最外层元素的offtleft // 320秒 * 0.50 = 160秒myaudio.currenttime = myaudio.duration * ((ev.clientx - (this.offtleft + outernode.offtleft))/this.offtwidth);trueline.style.width = ((ev.clientx - (this.offtleft + outernode.offtleft))/this.offtwidth) * 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 == fal){myaudio.play();}el{myaudio.pau();}//给封面赋值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>
本文发布于:2023-04-07 08:06:14，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1632a1ba6d0c5effdc9882e7de463f39.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML5音频（自定义mp3播放器源码）.doc
本文 PDF 下载地址：HTML5音频（自定义mp3播放器源码）.pdf
| 留言与评论（共有 0 条评论） |
