做的一个简单的半成品播放器
一、需求分析1、写静态页面
2、通过getMusicList函数用Ajax获取歌曲数据列表musiclist
3、通过loadMusic函数实现歌曲的播放功能
4、根据获取的歌曲数据来设置歌名、作者和背景图片
5、设置进度条随歌曲进度而实时变更,通过给audio对象绑定ontimeupdate事件来实现
6、设置歌曲时间随歌曲进度而实时更新,通过给audio对象绑定ontimeupdate或者setimeInval来实现
7、设置暂停键的功能
8、设置下一首的功能
9、设置上一首的功能
10、设置歌曲播放完成后,自动播放下一首的功能
11、设置点击进度条切换歌曲进度的功能
currentIndex 歌曲的当前下标
audio 当前歌曲对象
MusicList 歌曲数据对象
musicObj 当前歌曲对象 loadMusic函数传递的参数
创建或者获取的audio对象,可通过以下两种方式得到
方法1:
var audioObject = new Audio("http://cloud.hunger-valley.co...")
2、audioObject.play()开始播放
3、audioObject.pause()暂停播放
4、audioObject.autoPlay设置或者获取自动播放状态
audioObject.autoPlay = true //设置为自动播放,下次更换 audioObject.src 后会自动播放音乐
audioObject.autoPlay = false //设置不自动播放
console.log(audioObject.autoPlay)
设置或者获取音乐地址
audioObject.src = "http://cloud.hunger-valley.com/music/ifyou.mp3"
console.log(audioObject.src)
设置或者获取音量,最大值为1,0为静音
audioObject.volume = 0.5
audioObject.volume = 1
console.log(audioObject.volume)
设置或者获取循环状态
audioObject.loop = true
console.log(audioObject.loop)
获取音乐长度,单位为秒
console.log(audioObject.duration)
9、 audioObject.currentTime设置或者获取播放时间
console.log(audioObject.currentTime)
10、 audioObject.ended判断音乐是否播放完毕,只读属性
11、audio.paused表示音频对象是否处于暂停状态,可以用来设置暂停键
四、前提知识(audio对象的事件) 1、playing当音乐开始播放,暂停后重新开始播放,设置currentTime后开始播放时触发
audioObject.addEventListener("playing", function(){
console.log("playing")
})
当音乐暂停时和结束时触发
audioObject.addEventListener("pause", function(){
console.log("pause")
})
当音乐结束时触发
audioObject.addEventListener("ended", function(){
console.log("ended")
})
当currentTime更新时会触发timeupdate事件,这个事件的触发频率由系统决定,但是会保证每秒触发4-66次(前提是每次事件处理不会超过250ms.
//如下代码设置 每1秒左右执行一次
audioObject.shouldUpdate = true
audioObject.ontimeupdate = function(){
var _this = this
if(_this.shouldUpdate) {
//do something console.log("update") _this.shouldUpdate = false setTimeout(function(){ _this.shouldUpdate = true }, 1000)
}
}
当音量改变时触发
audioObject.onvolumechange = function(){ console.log("volumechange") }五、遇到的坑 1、设置progress-now的宽度随着播放时间变化而变化
我写成的事这样
audio.ontimeupdate=function(){ $(".progress-now").style.width=(this.currentTime/this.duration)*(getComputedStyle($(".bar")).width) }
实际上应该写成百分比就可以了
audio.ontimeupdate=function(e){ $(".progress-now").style.width = (this.currentTime/this.duration)*100 + "%"}2、两种方式设置歌曲时间随进度变化
1)设置ontimeupdate来设置,每秒触发4-66次,时间变化不均匀
audio.ontimeupdate=function(e){ $(".progress-now").style.width = (this.currentTime/this.duration)*100 + "%" var min=Math.floor(this.currentTime/60) var sec= Math.floor(this.currentTime %60)>9?(Math.floor(this.currentTime%60)):("0"+Math.floor(this.currentTime%60)) $(".time").innerText=""+min+":"+sec }
2)通过setInterval来设置,每秒一次,时间变化均匀
注意:这个函数不能写成this.currentTime %60,不然输出会变成NaN。要写成audio.currentTime。我猜想应该是和set intervalthis的值会发生改变。之后填坑
audio.onplay=function(){ clock =setInterval(function(){ var min=Math.floor(audio.currentTime/60) var sec= Math.floor(audio.currentTime %60)>9?(Math.floor(audio.currentTime%60)):("0"+Math.floor(audio.currentTime%60)) $(".time").innerText=""+min+":"+sec }) } audio.onpause=function(){ clearInterval(clock) }
注意:不能写成 var clock,clock必须是全局变量,没办法传递参数到clearInterval(clock),会报以下错
3、做宽度相除,需要加上parseInt将字符串转换成数值不然输出奇怪的数值
$(".musicbox .bar").onclick=function(e){ var percent=e.offsetX/ parseInt(getComputedStyle(this).width) audio.currentTime= audio.duration*percent //不要忘记了parseInt,把宽度转换为数值 }4、下一首的下标实现增加循环
currentIndex = (++currentIndex)%MusicList.length5、上一首的下标实现自减循环
currentIndex = ((--currentIndex)+MusicList.length)%MusicList.length6、GitHub不支持http协议
GitHub是https协议的,我在代码里面写了http协议,就报错了,需要全部改成https。
7、需要把引入js文件的代码放在最后,不然会报错Uncaught TypeError: Cannot set property "onclick" of null。
原因是加载到onclick这个代码的时候,发现dom结构还没有加载好,所以要把引入js文件的代码放在html的最后
本地测试没有问题,但是上传github后出现了引入js错误,发现是路径错误,需要加上./表示相对于当前的文件夹中的js和css
六、预览链接https://0612bamboo.github.io/...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99865.html
摘要:高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯的代码实现下前台后台是参考网上的例子写的,代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端,请查看这里写在前头的话鄙人野生前端一只,专业,自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...
摘要:高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯的代码实现下前台后台是参考网上的例子写的,代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端,请查看这里写在前头的话鄙人野生前端一只,专业,自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...
阅读 2657·2021-11-22 15:11
阅读 3489·2021-09-28 09:43
阅读 2846·2019-08-30 13:05
阅读 3307·2019-08-30 11:18
阅读 1409·2019-08-29 16:34
阅读 1197·2019-08-29 13:53
阅读 2806·2019-08-29 11:03
阅读 1604·2019-08-29 10:57