我的在线音乐播放器(移动端)

轩陌

分类: 实战案例 10810 46

一个月不更新了,先来几张音乐播放器的效果图吧,歌词联动后边在搞了,rem还没搞好,羞羞羞,哈哈,微信浏览不能实现在线搜索,可以用浏览器打开
html5-music html5-music 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事件,只做了移动端的拖拽,进度条与音量,音量在移动端不起作用

  • 116人 Love
  • 0人 Haha
  • 1人 Wow
  • 1人 Sad
  • 0人 Angry
HTML5 Audio、HTML5音乐播放器

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 46 条评论关于 “我的在线音乐播放器(移动端)”

Loading...