相关技能

  • 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标签自制音乐播放器的更多相关文章

  1. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  2. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  3. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  4. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  5. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  6. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  7. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  8. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  9. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

随机推荐

  1. BZOJ4289 PA2012Tax(最短路)

    一个暴力的做法是把边看成点,之间的边权为两边的较大权值,最短路即可.但这样显然会被菊花图之类的卡掉. 考虑优化建图.将边拆成两个有向边,同样化边为点.原图中同一条边在新图中的两个点之间连边权为原边权的 ...

  2. 推荐算法相关总结表(包括DM)

    推荐算法总结表 表1 推荐算法分类 个性化推荐算法分类 启发式算法 基于模型 基于内容 TF-IDF 聚类 最大熵 相似度度量 贝叶斯分类 决策树 神经网络 专家系统 知识推理 协同过滤 K近邻 聚类 ...

  3. Oracle 获取数据最新版本

    表数据如:  以CODE 作为版本分组字段,对创建时间进行按最新排序 ID  NAME CODE   CREATE_TIME 1ffg    abc    001    2014-01-01 1gff ...

  4. [洛谷P3975][TJOI2015]弦论

    题目大意:求一个字符串的第$k$大字串,$t$表示长得一样位置不同的字串是否算多个 题解:$SAM$,先求出每个位置可以到达多少个字串($Right$数组),然后在转移图上$DP$,若$t=1$,初始 ...

  5. BZOJ1046 [HAOI2007]上升序列 【LIS + 字典序最小】

    1046: [HAOI2007]上升序列 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 5410  Solved: 1877 [Submit][St ...

  6. Java第一次实验报告——Java开发环境的熟悉

    北京电子科技学院(BESTI) 实    验    报    告 课程名称:java程序设计实验      班级:1352         姓名:洪韶武      学号:20135219 成绩:   ...

  7. 解决requests获取源代码时中文乱码问题

    用requests获取源代码时,如果是中文网页,就可能会出现乱码,下面我以中关村的网站为例: import requests url = 'http://desk.zol.com.cn/meinv/' ...

  8. 背景建模技术(七):预处理(PreProcessor)模块

    预处理(PreProcessor)模块是BgsLibrary中一个必选的模块,是真正进入背景建模算法的“预处理”过程,其主要功能包括‘去模糊’.‘获得灰度图’.'应用Canny算子‘等可选模块. 下面 ...

  9. Eureka与zookeeper

    Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的选举leader的过程:客户端请求会自动切换到新的Eureka节点:当宕机的服务器重新恢复 ...

  10. uboot的硬件驱动

    1.uboot借用(移植)了linux驱动(1)linux驱动本身做了模块化设计.linux驱动本身和linux内核不是强耦合的,这是linux驱动可以被uboot借用(移植)的关键.(2)uboot ...