https://www.xuanmo.xin/1598.html

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

发布于 分类: Html5 & CSS3案例 45 4745

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

css3滤镜

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

笔记

HTML5音频标签,<audio src=”http://file.xuanmomo.com/Faded.mp3″>您当前浏览器版本过低,请更换浏览器!</audio>,标签内的文字只在不认识标签的低版本中显示
音频标签基本API:
   play():播放
   pause():暂停
   obj.duration:总时间
   obj.currentTime:当前时间
   obj.volume:音量
   obj.ended:是否播放完成(Boolean)
   timeupdate事件,返回当前播放位置

监听部分代码

音量拖动代码


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

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

已经没有了!