HTML5 播放器
来源:互联网 发布:java堆排序 编辑:程序博客网 时间:2024/06/04 23:21
一.歌曲播放进度
currentTime() :以秒为单位返回从开始播放到目前所花的时间,也可设置 currentTime 的值来跳转到特定位置;
duration:获取媒体文件的播放时长,以秒为单位,如果无法获取,则为 NaN;
歌曲进度:首先先设置一个定时器,分别获取这两个值,用当前播放的秒数除以歌曲总秒数,再乘以歌曲进度条的总宽度(px),就能算出歌曲进度条一秒钟可以走多少了。
歌曲进度调节:点击进度条的某个位置,歌曲跳转到响应位置,这个功能的实现是先获取到点击的位置距离进度条最左边的长度,接着获得这段距离在整个进度条的长度里所占的百分比,用这个百分比乘以歌曲的总长度,就能算出该给 currentTime 设置的值了。
二.歌曲时间显示
歌曲显示:在计算歌曲进度的定时器内,不断发送歌曲的播放时间和总时间,左边的时间为歌曲的播放时间,也就是 currentTime 的值,右边的时间用总时间减去 currentTime ,并将它们转换为我们需要的格式即可
三.音量的调节
volume:在0.0到1.0间设置音量值,或查询当前音量值;
音量调节:这个功能实现起来很简单,把 volume 的值设为 0.0,就静音了。在控件上调节音量的原理和也歌曲的进度条一样,判断点击位置距离第一个相对元素 Y 轴上最顶端的位置,然后再进一步计算出具体的数值,注意数值的格式,别超过1,并且小数点后只有1位。
四、播放列表与播放方式
把整个歌曲文件的信息都写在 json 文件里,获取并生成播放列表。当播放歌曲时,系统会生成当前播放歌曲的引索值(例如:1,2,表示第二张专辑的第三首歌,这个很重要,歌曲切换都是基于这个引索值的),当要播放下一曲时,系统会根据当前是什么播放方式(列表循环,单曲循环,随机播放,顺序播放),生成新的引索值,然后通知播放器,下一首该怎么播放,是随机,还是循环,还是播放结束
五、同步显示歌词
1.ajax获取歌词文件(lrc文件)。
2.用正则分别去过滤出歌词和歌词前面对应的时间,存入数组。
3.将歌词的时间和内容遍历存入 HTML。
4.每秒都去判断一下现在歌曲播放的时间,如果和临时数据 data-timeline 里的值一样,就滚动。
- HTML5播放器代码
- html5 自定义播放器
- html5视频播放器
- HTML5音频播放器
- HTML5音乐播放器
- html5视频播放器
- 自定义HTML5播放器
- HTML5 播放器
- HTML5-视频播放器
- HTML5 播放器
- HTML5音乐播放器
- HTML5 播放器
- HTML html5播放flash SWF播放器
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
- 自定义HTML5 audio 播放器
- Html5 音频播放器实例
- HTML5 音乐播放器 jPlayer
- 编程练习:矩阵类
- 实训2/6 Python 判断、循环、随机数……
- GO语言 16进制字节数组互转
- c++ 继承
- 初始化一个express项目
- HTML5 播放器
- 原谅以前我的无知
- java异常处理Exception
- 浅谈 Masonry 布局框架
- Qt-QML-C++交互实现文件IO系统
- 自动化测试登陆模块化——以QQ邮箱登陆为例
- LeetCoder 17. Letter Combinations of a Phone Number
- webpack学习笔记
- 自定义控件 遥控器 上下左右确定 控件