首页 > CSS模板 > 娱乐网站 > 非常漂亮的音乐播放器html模板正文

非常漂亮的音乐播放器html模板

音乐播放器html
音乐播放器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等等。写的比较粗糙,没有封装,将就着用吧。