audio对象

src兼容.ogg .wav .mp3

  1.     <audio controls src='data/imooc.wav'></audio>

width autoplay loop muted静音

  1.     <audio controls src='data/imooc.wav' autoplay loop width='500' height='500' muted></audio>

播放play()

  1.         var myAudio = new Audio();
  2.         myAudio.src = 'data/imooc.wav';
  3.         myAudio.play();
  4.         btn.onclick = function(){
  5.             myAudio.play();
  6.         };

暂停pause()

  1.             pauseNode.onclick = function(){
  2.                 myAudio.pause();
  3.             };

当前播放的时间currentTime

音频总时长duration

  1.             //返回音频的总长度
  2.             myAudio.addEventListener('canplay',function(){
  3.                 durationNode.innerHTML = myAudio.duration;
  4.             });
  5.             //更新当前播放的时间
  6.             setInterval(function(){
  7.                 currentNode.innerHTML = myAudio.currentTime;
  8.             },100);

音频源currentSrc

  1.         var myAudio = new Audio();
  2.         myAudio.src = 'data/imooc.mp3';
  3.         console.log(myAudio.currentSrc);

loop循环

  1.         myAudio.loop = true;

音频播放结束ended

  1.         myAudio.addEventListener('ended',function(){
  2.             console.log('音频播放结束');
  3.             console.log(myAudio.ended)
  4.         });

重新加载

  1.         loadBtn.onclick = function(){
  2.             myAudio.load();
  3.         };

跳转到新的播放位置seeked / seeking

  1.         myAudio.addEventListener('seeked',function(){
  2.             console.log('seeked');
  3.         });
  4.         myAudio.addEventListener('seeking',function(){
  5.             console.log('seeking');
  6.             sekingNum++;
  7.             seekingNum.innerHTML = sekingNum;
  8.         });

playbackRate设置当前播放速度

  1.         myAudio.playbackRate = '15';
  2.         console.log(myAudio.playbackRate)

全屏requestFullScreen

  1.         btnScreen.onclick = function(){
  2.             myAudio.webkitRequestFullScreen();
  3.         }

loop 循环

  1.         myAudio.loop = true;

volumechange音量改变

  1.         myAudio.addEventListener('volumechange',function(){
  2.             console.log('音频的声音改变了')
  3.         });

timeupdate音频正在播放状态

  1.         myAudio.addEventListener('timeupdate',function(){
  2.             console.log('音频正在播放中...')
  3.         })

自定义mp3播放器
放图

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7. *{margin: 0;padding: 0;list-style: none;}
  8. .outerNode{width: 505px;height: 406px;position: absolute;left: 50%;top: 50%;margin: -204px 0 0 -253.5px;border: 1px solid #a6a18d;border-radius:8px;box-shadow: 0 0 16px #a6a18d; }
  9. .innerNode{width: 503px;height: 405px;border-top:1px solid #e1d1b9;border-left:1px solid #ceccbf;border-radius: 8px;overflow: hidden;border-right:1px solid #ceccbf;   }
  10. .topNode{width: 100%;height: 198px;border-bottom: 1px solid #787463;background: url(music/pic/fmt01.jpg) center center;background-size:cover; transition:.7s;position: relative;}
  11. .lineNode{
  12.     width: 100%;height: 46px;border-top: 1px solid #f9f7ee;border-bottom: 1px solid #a29d8a;background: url(musicimage/linebg.jpg) repeat-x;
  13. }
  14. .progressNode{width: 440px;height: 18px;float: left;margin:13px 0 0 28px;background: url(musicimage/progressbg.jpg) repeat-x;position: relative; }
  15. .progressNode .progressleft{
  16.     width: 7px;height: 100%;position: absolute;left: 0;
  17.     background: url(musicimage/leftNode.jpg);
  18. }
  19. .progressNode .progressright{
  20.     width: 7px;height: 100%;position: absolute;right: 0;
  21.     background: url(musicimage/rightNode.jpg);
  22. }
  23. .bottomNode{
  24.     width: 100%;height: 157px;border-top: 1px solid #a29d8a;
  25.     background: url(musicimage/bottombg.jpg) repeat-x;position: relative;
  26. }
  27. .lastNode{width: 75px;height: 74px;position: absolute;background: url(musicimage/lastBg.png) no-repeat;left: 118px;top: 39px;cursor: pointer;}
  28. .playNode{width: 95px;height: 94px;position: absolute;background: url(musicimage/playNode.png) no-repeat;left: 202px;top: 29px;cursor: pointer;}
  29. .nextNode{width: 75px;height: 74px;background: url(musicimage/rightbg.png) no-repeat;position: absolute;left: 306px;top: 39px;cursor: pointer;}
  30. .volumeNode{width: 37px;height: 32px;background: url(musicimage/volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
  31. .no_volumeNode{width: 37px;height: 32px;background: url(musicimage/no_volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
  32.  
  33. .trueLine{position: absolute;left: 3px;top: 2px;height: 12px;width: 0%;
  34.     background: url(musicimage/green_bg.png) repeat-x;border-radius: 6px;
  35.     border-right: 1px solid #787463;
  36.  
  37. }
  38. .musicName{color: white;position: absolute;bottom: 2px;left: 5px;}
  39.  
  40.     </style>
  41. </head>
  42. <body>
  43.     <!-- outerNode 最外层的元素 -->
  44.     <div class='outerNode'>
  45.         <!-- innerNode 内层元素 -->
  46.         <div class='innerNode'>
  47.             <!-- topNode 封面图元素 -->
  48.             <div class='topNode'>
  49.                 <!-- 音乐名称 -->
  50.                 <div class='musicName'></div>
  51.             </div>
  52.             <!-- lineNode 进度条元素 -->
  53.             <div class='lineNode'>
  54.                 <!-- 进度条-->
  55.                 <div class='progressNode'>
  56.                     <div class='progressleft'></div>
  57.                     <div class='progressright'></div>
  58.                     <!-- 真正的进度条 -->
  59.                     <div class='trueLine'></div>
  60.                 </div>
  61.             </div>
  62.             <!-- bottomNode 空间元素 -->
  63.             <div class='bottomNode'>
  64.                 <!-- lastNode 上一曲的按钮-->
  65.                 <div class='lastNode'></div>
  66.                 <!-- playNode 播放暂停的按钮 -->
  67.                 <div class='playNode'></div>
  68.                 <!-- nextNode 下一曲的按钮 -->
  69.                 <div class='nextNode'></div>
  70.                 <!-- volumeNode 静音或非静音的按钮-->
  71.                 <div class='volumeNode'></div>
  72.             </div>
  73.         </div>
  74.     </div>
  75.     <script type="text/javascript">
  76.         //播放暂停的按钮
  77.         //playBln 控制播放暂停的布尔值
  78.         var playBtn = document.querySelector('.playNode'),
  79.         playBln = true,
  80.         //控制声音的按钮
  81.         //volumeBln 控制声音的布尔值
  82.         volumeNode = document.querySelector('.volumeNode'),
  83.         volumeBln = true,
  84.         //进度条的选择器
  85.         trueLine = document.querySelector('.trueLine'),
  86.         //进度条外层的元素
  87.         progressNode = document.querySelector('.progressNode'),
  88.         //最外层元素
  89.         outerNode = document.querySelector('.outerNode'),
  90.         //选择一下封面背景
  91.         topNode = document.querySelector('.topNode'),
  92.         //下一首歌的按钮
  93.         nextNode = document.querySelector('.nextNode'),
  94.         //上一首歌的按钮
  95.         lastNode = document.querySelector('.lastNode'),
  96.         //音乐名称
  97.         musicName = document.querySelector('.musicName');
  98.  
  99.         //给播放器添加js
  100.         //创建audio对象
  101.         var myAudio = new Audio();
  102.         //给audio对象一个 src
  103.         //所有的数据存在数组里面
  104.         let allMusic = [{
  105.             'MusicSrc':'music/mus/AcousticGuitar1.mp3',
  106.             'MusicPic':'music/pic/fmt01.jpg',
  107.             'MusicName':'AcousticGuitar1'
  108.         },{
  109.             'MusicSrc':'music/mus/AmazingGrace.mp3',
  110.             'MusicPic':'music/pic/fmt02.png',
  111.             'MusicName':'AmazingGrace'
  112.  
  113.         },{
  114.             'MusicSrc':'music/mus/FeelsGood2B.mp3',
  115.             'MusicPic':'music/pic/fmt03.jpg',
  116.             'MusicName':'FeelsGood2B'
  117.  
  118.         },{
  119.             'MusicSrc':'music/mus/FunBusyIntro.mp3',
  120.             'MusicPic':'music/pic/fmt04.jpg',
  121.             'MusicName':'FunBusyIntro'
  122.  
  123.         },{
  124.             'MusicSrc':'music/mus/GreenDaze.mp3',
  125.             'MusicPic':'music/pic/fmt05.jpg',
  126.             'MusicName':'GreenDaze'
  127.  
  128.         },{
  129.             'MusicSrc':'music/mus/Limosine.mp3',
  130.             'MusicPic':'music/pic/fmt06.jpg',
  131.             'MusicName':'Limosine'
  132.  
  133.         }],Index = 0;
  134.         myAudio.src = allMusic[Index].MusicSrc;
  135.  
  136.         //给封面赋值
  137.         topNode.style.backgroundImage = 'url('+allMusic[Index].MusicPic+')';
  138.  
  139.         //给音乐名称
  140.         musicName.innerHTML = allMusic[Index].MusicName;
  141.  
  142.         //谷歌浏览器不允许直接play
  143.         //myAudio.play();
  144.  
  145.         //播放暂停的事件
  146.         playBtn.onclick = function(){
  147.             //myAudio.play();
  148.             playBln = !playBln;
  149.             if(playBln == false){
  150.                 myAudio.play();
  151.             }
  152.             else{
  153.                 myAudio.pause();
  154.             }
  155.         };
  156.  
  157.         //声音的事件
  158.         volumeNode.onclick = function(){
  159.             volumeBln = !volumeBln;
  160.             if(volumeBln == false){
  161.                 myAudio.volume = 0;
  162.                 this.className = 'no_volumeNode';
  163.             }
  164.             else{
  165.                 myAudio.volume = 1;
  166.                 this.className = 'volumeNode';
  167.             }
  168.         };
  169.  
  170.         //播放时 进度条的长度控制计算
  171.         myAudio.addEventListener('timeupdate',function(){
  172.             trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 + '%';
  173.         });
  174.  
  175.         //点击progressNode元素 让进度条直接到达这个位置
  176.         progressNode.onclick = function(e){
  177.             var ev = e || event;
  178.             //算法 就是 算出 点击的位置 在 外层进度条的 多少像素
  179.             //需要一个鼠标坐标点 减去 外层元素的 offsetLeft 和 最外层元素的offsetLeft 
  180.  
  181.             // 320秒 *  0.50 = 160秒
  182.             myAudio.currentTime = myAudio.duration * ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth);
  183.  
  184.             trueLine.style.width = ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth) * 100 + '%';
  185.         };
  186.  
  187.         //下一首歌的事件
  188.         nextNode.onclick = function(){
  189.             Index ++;
  190.             if(Index == allMusic.length){
  191.                 Index = 0;
  192.             }
  193.             MusicPlayFn();
  194.         };
  195.         //音乐播放的函数
  196.         function MusicPlayFn(){
  197.             myAudio.src = allMusic[Index].MusicSrc;
  198.             myAudio.currentTime = 0;
  199.             trueLine.style.width = '0%';
  200.             if(playBln == false){
  201.                 myAudio.play();
  202.             }
  203.             else{
  204.                 myAudio.pause();
  205.             }
  206.  
  207.             //给封面赋值
  208.             topNode.style.backgroundImage = 'url('+allMusic[Index].MusicPic+')';
  209.             //给音乐名称
  210.             musicName.innerHTML = allMusic[Index].MusicName;
  211.         }
  212.  
  213.         //上一首歌的点击事件
  214.         lastNode.onclick = function(){
  215.             Index --;
  216.             if(Index == -1){
  217.                 Index = allMusic.length-1;
  218.             }
  219.             MusicPlayFn();
  220.         };
  221.  
  222.     </script>
  223. </body>
  224. </html>

HTML5音频（自定义mp3播放器源码）的更多相关文章

  1. 一步步实现windows版ijkplayer系列文章之三——Ijkplayer播放器源码分析之音视频输出——音频篇

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  2. 一步步实现windows版ijkplayer系列文章之二——Ijkplayer播放器源码分析之音视频输出——视频篇

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  3. Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

    一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 源码下载:http://code.66 ...

  4. 一款非常简单的android音乐播放器源码分享给大家

    一款非常简单的android音乐播放器源码分享给大家,该应用虽然很小,大家常用的播放器功能基本实现了,可能有点还不够完善,大家也可以自己完善一下,源码在源码天堂那里已经有了,大家可以到那里下载学习吧. ...

  5. 【流媒体开发】VLC Media Player - Android 平台源码编译 与 二次开发详解 (提供详细800M下载好的编译源码及eclipse可调试播放器源码下载)

    作者 : 韩曙亮  博客地址 : http://blog.csdn.net/shulianghan/article/details/42707293 转载请注明出处 : http://blog.csd ...

  6. 项目源码--Android3D影音播放器源码

      下载源码   技术要点: 1.本地音乐管理 2.音频流的解码 3. UI控件的综合使用 4. 视频流的解码 5. 动态更换皮肤 6. 3D效果的实现 7. 源码带详细的中文注释 ...... 详细 ...

  7. 实例源码--Android简单音乐播放器源码

      下载源码   技术要点: 1.本地音乐管理 2.在线音乐听歌.下载 3.音频流的解码 4. HTTP通信模块 5. Sqlite数据库 6. 源码带详细的中文注释 ...... 详细介绍: 1.本 ...

  8. H5音乐播放器源码地址

    源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA      安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...

  9. H5音乐播放器源码共享

    由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w   H5源码!暂时只支持手机适配,电脑端 ...

随机推荐

  1. Actix-web Rust连接Postgres数据库

    Actix-web Rust连接Postgres数据库 ​ Rust1.39支持了异步async,await,Actix-web在2.0.0-alpha支持了原生异步写法,所以本文中使用的Actix- ...

  2. Codevs 1205 单词反转（Vector以及如何输出string）

    题意:倒序输出句子中的单词 代码: #include<cstdio> #include<iostream> #include<string> #include< ...

  3. 基于 HTML5 WebGL 的智慧楼宇三维可视化监控

    前言 可视化的智慧楼宇在 21 世纪是有急迫需求的,中国被世界称为"基建狂魔",全球高层建筑数量位居首位,所以对于楼宇的监控是必不可少.智慧楼宇可视化系统更多突出的是管理方面的功能 ...

  4. 使用Java8 Files类读写文件

    Java8 Files类的newBufferedReader()和newBufferedWriter()方法 这两个方法接受Path类型的参数.Path 类是Java8 NIO中的接口.可以由Path ...

  5. kubernetes集合

    kubernetes集合 kubernetes(1):kubernetes简介和组件 kubernetes(2):yum安装kubernetes kubernetes(3):kubeadm安装k8s1 ...

  6. ELK 记录 java log4j 类型日志

    ELK 记载  java log4j 时,一个报错会生成很多行,阅读起来很不方便. 类似这样 解决这个问题的方法 1.使用多行合并 合并多行数据(Multiline) 有些时候,应用程序调试日志会包含 ...

  7. React之JSX的语法细节

    带注释 import React, { Component, Fragment } from 'react' import './style.css' class TodoList extends C ...

  8. asp.net MVC项目开发之统计图echarts后台数据的处理（三）

    前台显示的东西,有相应的文档很容易修改,后台传递数据方式才是我们最关心的 首先要记住,我们一步数据使用的是post,那么后台代码我们要给方法加上 [HttpPost]注解 不然异步没有效果 下面上代码 ...

  9. redis教程-redis环境搭建安装（qq:1324981084）

    需要整套redis缓存高可用集群教学视频的加qq:1324981084,本套视频从安装到集群的搭建和源码的解析,从零基础讲解. 1.利用命令将redis下载到/usr/local/文件夹下: wget ...

  10. 分形的奥秘！分形着色器！shader 编程入门实战 ！ Cocos Creator！

    极致的数学之美! 什么是分形? "一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状" 简单来说,分形(fractal)就像这个doge表情包 ...