音乐播放器html
这是我爱模板网根据“非常漂亮的音乐播放器PSD分层模板”编写的音乐播放器html模板,支持播放器的音乐大小调整和快进快退,并且支持鼠标滚动调整。支持上一曲下一曲切换,专辑图和背景高斯模糊的切换(高斯模糊用的是html5的filter滤镜的blur模糊),随机播放、顺序播放和循环播放等。
在做播放器的时候,我遇到了两个问题,一个是谷歌Chrome浏览器下,audio快进快退不行,必须将音频文件放到服务器,远程获取才可以(IE和Firefox没有这个问题),另一个是input框js动态改变值得时候,onchange和oninput事件都监听不到,不得已只能进行值得比较,代码如下:
function setCurTime(curTime){ var curMinutes = parseInt(curTime/60); var curSeconds = parseInt(curTime%60); currentTime.innerText = formatNum(curMinutes) + ':' + formatNum(curSeconds); //js动态改变input值无法监听,故采用比较的方法 var oldTime = playRange.value; if(oldTime != curTime){ playRange.value = curTime; var maxValue = playRange.max; var width = (curTime/maxValue)*100 +"%"; playRange.nextElementSibling.style.width = width; } }还有很多功能没有做,比如加载进度条、切换等待的loading等等。写的比较粗糙,没有封装,将就着用吧。
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!