HTML5 audio标签自制音乐播放器

jiaoyu121 2021-09-04 原文


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,我们一起学前端!

发表于
2017-06-17 17:21 
狙击手+ 
阅读(1127
评论(0
编辑 
收藏 
举报

 

版权声明:本文为jiaoyu121原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/jiaoyu121/p/7040808.html

HTML5 audio标签自制音乐播放器的更多相关文章

  1. Html5 Video标签在一些浏览器不能自动播放解决方法

    今天在整公司的一个官网,开头有一段视频要自动播放。用了html5的video标签,并添加autoplay=&# […]...

  2. 基于 HTML5 Canvas 的电信机柜 U 位动态管理

    电信上运用到机柜 U 位的非常普遍,但是经常在创建 2D/3D 模型的时候,我们向内添加设备,每个设备占的 U […]...

  3. Angular-搜索框及价格上下限

    Angular-搜索框及价格上下限   闲来无事,写一个简单的angular的搜索框。 1.要求: 利用 An […]...

  4. Omi 拥抱 60FPS 的 Web 动画

    Omi 拥抱 60FPS 的 Web 动画 2018-11-15 09:19 by 【当耐特】, … […]...

  5. vue+html5实现上传图片

    原理:dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件方案:vue项目,点击自己的上传文件图标,通过dispatchEvent主动触发一个自定义上传文件事件 .原生控件 inpu...

  6. 2022最新Html5+Css3笔记

    VsCode快捷键Chrome调试工具思维导图Html渲染引擎渲染引擎:浏览器中,专门用来对代码进行解析渲染的部分。Can I use注意:渲染引擎不同,导致解析相同的代码,速度,效果也不同。而且由于渲染引擎的不同,导致各个浏览器...

  7. HTML5(十一)——WebSocket 基础教程

    一、为什么要学 WebSocket? websocket 是 HTML5 提供的一种长链接双向通讯协议,使得客 […]...

  8. 比较运算规则 == 、 ===、Object.is 和 ToPrimitive 方法 [[DefaultValue]] (hint)

    1、== 相等运算符 如果 x 与 y 类型一致时规则如下: 1. 如果 x 类型为 Undefined,返回 […]...

随机推荐

  1. LeetCode_Two Sum

    问题 Given an array of integers, return indices of the tw […]...

  2. Asp.Net Core WebApi (Swagger+EF Core/Code First)

    Swagger简介: Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计 […]...

  3. Android开发欢迎页点击跳过倒计时进入主页

    页面效果: 没点击跳过自然进入主页,点击跳过之后立即进入主页HelloWorld   实现步骤: 1、欢迎页布 […]...

  4. IDEA Spring Boot 项目创建

      1、创建新项目 2、选择 Spring Initializr 3、选择默认项或者修改其名称也可,直接下一步 […]...

  5. T端多功能魔兽NPC脚本-Tools Npc脚本代码

    已经有很多的功能性的NPC的Trinity-Core魔兽世界私服单机 的脚本代码。这里我在弄一个可能大家都会比 […]...

  6. jQuery表单验证的几种方法

    js的表单验证 1.jQuery的框架的验证:validate框架 Jquery Validate 验证规则 […]...

  7. 最喜欢的几首曲子

    陆续将自己喜欢的乐曲收集起来 1.《from silence》 是日剧《柏拉图式性 爱》的主题音乐,是佐桥俊彦 […]...

  8. 软件实现的施密特触发器

              在一些智能充电器中,单片机要一直监测电池的电压,一旦超过某一数值,就由恒流充电切换到恒压充 […]...

展开目录

目录导航