我的在线音乐播放器（移动端）

轩陌 2017-01-29 00:37:13

分类：实战案例 10725 46

一个月不更新了，先来几张音乐播放器的效果图吧，歌词联动后边在搞了，rem还没搞好，羞羞羞，哈哈，微信浏览不能实现在线搜索，可以用浏览器打开
html5-music
在线展示

css3滤镜

此次的背景用到了css3新增属性，用到的时候度娘才知道强大的滤镜，觉得菜鸟教程写的挺好的，在线教程地址：http://www.runoob.com/cssref/css3-pr-filter.html

笔记

HTML5音频标签，<audio src="https://www.xuanmo.xin/-/music/Beautiful%20Now.mp3">您当前浏览器版本过低，请更换浏览器！</audio>，标签内的文字只在不认识标签的低版本中显示
音频标签基本API：
   play()：播放
   pause()：暂停
   obj.duration：总时间
   obj.currentTime：当前时间
   obj.volume：音量
   obj.ended：是否播放完成（Boolean）
   timeupdate事件，返回当前播放位置

监听部分代码

音量拖动代码

拖拽用到了touchstart/touchmove事件,只做了移动端的拖拽，进度条与音量，音量在移动端不起作用

Xuanmo Blog