HTML5 audio标签自制音乐播放器
相关技能
HTML5+CSS3
(实现页面布局和动态效果)Iconfont
(使用矢量图标库添加播放器相关图标)LESS
(动态CSS编写)jQuery
(快速编写js脚本)gulp+webpack
(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码)
实现的功能
- 播放暂停(点击切换播放状态)
- 下一曲(切换下一首)
- 随机播放(当前歌曲播放完自动播放下一曲)
- 单曲循环(点击随机播放图标可切换成单曲循环)
- 音量调节(鼠标移入滑动设置音量大小)
- 歌曲进度条(可点击切换进度直接跳,也可以点击小圆点拖拽切换进度)
- 实时歌词(点击词,切换歌词界面,根据实时进度自动滚动歌词)
- 喜欢(点击添加了一个active效果)
- 分享(可以直接分享到新浪微博)
audio 标签使用
autoplay
自动播放loop
循环播放volume
音量设置currentTime
当前播放位置duration
音频的长度pause
暂停play
播放ended
返回音频是否已结束
播放和暂停代码
_Music.prototype.playMusic = function(){
var _this = this;
this.play.on('click', function(){
if (_this.audio.paused) {
_this.audio.play();
$(this).html('');
} else {
_this.audio.pause();
$(this).html('')
}
});
}
音乐进度条代码
_Music.prototype.volumeDrag = function(){
var _this = this;
this.btn.on('mousedown', function(){
_this.clicking = true;
_this.audio.pause();
})
this.btn.on('mouseup', function(){
_this.clicking = false;
_this.audio.play();
})
this.progress.on('mousemove click', function(e){
if(_this.clicking || e.type === 'click'){
var len = $(this).width(),
left = e.pageX - $(this).offset().left,
volume = left / len;
if(volume <= 1 || volume >= 0){
_this.audio.currentTime = volume * _this.audio.duration;
_this.progressLine.css('width', volume *100 +'%');
}
}
});
}
歌词添加代码
_Music.prototype.readyLyric = function(lyric){
this.lyricBox.empty();
var lyricLength = 0;
var html = '<div class="lyric-ani" data-height="20">';
lyric.forEach(function(element,index) {
var ele = element[1] === undefined ? '^_^歌词错误^_^' : element[1];
html += '<p class="lyric-line" data-id="'+index+'" data-time="' + element[0] + '"> ' + ele + ' </p>';
lyricLength++;
});
html += '</div>';
this.lyricBox.append(html);
this.onTimeUpdate(lyricLength);
}
代码还有很多就不一一添加了,觉得还行的话可以点下喜欢(也可以在我的GitHub给个Star),你的喜欢和Star是我继续创作的动力,非常感谢!!!源码加群
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
HTML5 audio标签自制音乐播放器的更多相关文章
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
随机推荐
- BZOJ4289 PA2012Tax(最短路)
一个暴力的做法是把边看成点,之间的边权为两边的较大权值,最短路即可.但这样显然会被菊花图之类的卡掉. 考虑优化建图.将边拆成两个有向边,同样化边为点.原图中同一条边在新图中的两个点之间连边权为原边权的 ...
- 推荐算法相关总结表(包括DM)
推荐算法总结表 表1 推荐算法分类 个性化推荐算法分类 启发式算法 基于模型 基于内容 TF-IDF 聚类 最大熵 相似度度量 贝叶斯分类 决策树 神经网络 专家系统 知识推理 协同过滤 K近邻 聚类 ...
- Oracle 获取数据最新版本
表数据如: 以CODE 作为版本分组字段,对创建时间进行按最新排序 ID NAME CODE CREATE_TIME 1ffg abc 001 2014-01-01 1gff ...
- [洛谷P3975][TJOI2015]弦论
题目大意:求一个字符串的第$k$大字串,$t$表示长得一样位置不同的字串是否算多个 题解:$SAM$,先求出每个位置可以到达多少个字串($Right$数组),然后在转移图上$DP$,若$t=1$,初始 ...
- BZOJ1046 [HAOI2007]上升序列 【LIS + 字典序最小】
1046: [HAOI2007]上升序列 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 5410 Solved: 1877 [Submit][St ...
- Java第一次实验报告——Java开发环境的熟悉
北京电子科技学院(BESTI) 实 验 报 告 课程名称:java程序设计实验 班级:1352 姓名:洪韶武 学号:20135219 成绩: ...
- 解决requests获取源代码时中文乱码问题
用requests获取源代码时,如果是中文网页,就可能会出现乱码,下面我以中关村的网站为例: import requests url = 'http://desk.zol.com.cn/meinv/' ...
- 背景建模技术(七):预处理(PreProcessor)模块
预处理(PreProcessor)模块是BgsLibrary中一个必选的模块,是真正进入背景建模算法的“预处理”过程,其主要功能包括‘去模糊’.‘获得灰度图’.'应用Canny算子‘等可选模块. 下面 ...
- Eureka与zookeeper
Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选举leader的过程:客户端请求会自动切换到新的Eureka节点:当宕机的服务器重新恢复 ...
- uboot的硬件驱动
1.uboot借用(移植)了linux驱动(1)linux驱动本身做了模块化设计.linux驱动本身和linux内核不是强耦合的,这是linux驱动可以被uboot借用(移植)的关键.(2)uboot ...