请选择 进入手机版 | 继续访问电脑版
查看: 355|回复: 0

H5音频播放器自定义样式,audio标签的样式修改

[复制链接]

595

主题

597

帖子

3065

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
3065
发表于 2021-7-28 12:40:24 | 显示全部楼层 |阅读模式
由于H5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比较简单,就是把写audio的时候不要用controls属性,隐藏原生的audio, 然后用div之类标签,定义css样式美化起来用来显示播放器的效果,最后用js捕获audio事件,基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API:

控制函数功能说明
load():加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载
play():加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放
pause():暂停处于播放状态的音频、视频文件
audio 可脚本控制的特性值

src:音频文件路径。
autoplay:设置音频是否自动播放 (默认有此属性为自动播放已经加载的的媒体文件),或查询是否已设置为autoplay
autobuffer:设置是否在页面加载时自动缓冲音频,如果设置了autoplay,则忽略此特性
loop:设置音频是否要循环播放。,或查询是否已设置为loop
currentTime:以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置 controls:
显示或者隐藏用户控制界面(属性供添加播放、暂停和音量控件。 ) volume:在0.0到1.0间设置音量值,或查询当前音量值
muted:设置是否静音

controls : 是否显示播放控件,不同的浏览器的控件外观不相同
duration : 影片总时长(s)
ended: 是否播放到最后结尾了
muted:是否静音
volumn: 0~1 音量设置,默认是最大值,且是js对象的属性,不能在标签上直接写
pasued : 当期那是否处于暂停状态
poster: 指定视频第一帧播放前的电影海报
preload 值视频预加载的方案
    > 取值:metadata 元数据,只预加载视频的宽度、时长、第一帧内容
    >      auto  自动预加载、时长、第一帧内容、并缓冲一定时长
    >      none:不预加载任何内容

只读属性属性说明
duration:获取媒体文件的播放时长,以s为单位,如果无法获取,则为NaN
paused:如果媒体文件被暂停,则返回true,否则返回false
ended:如果媒体文件播放完毕,则返回true
startTime:返回起始播放时间,一般是0.0,除非是缓冲过的媒体文件,并一部分内容已经不在缓冲区
error:在发生了错误后返回的错误代码
currentSrc:以字符串形式返回正在播放或已加载的文件,对应于浏览器在source元素中选择的文件
对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3。幸好Google的chrome都支持。

代码如下:
  1. <style>
  2.          *{
  3.             margin:0;
  4.             padding:0;
  5.             box-sizing:border-box;
  6.             -webkit-tap-highlight-color:transparent;
  7.         }
  8.         body{
  9.             background:#2b2938;
  10.         }
  11.         .btn-audio{
  12.             margin: 90px auto;
  13.             width: 186px;
  14.             height: 186px;
  15.             background:url(images/voice_stop.png) no-repeat center bottom;
  16.             background-size:cover;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.      <div class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></div>
  22.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
  23.     <script>
  24.     $(function(){
  25.         //播放完毕
  26.         $('#mp3Btn').on('ended', function() {
  27.             console.log("音频已播放完成");
  28.             $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
  29.         })
  30.         //播放器控制
  31.         var audio = document.getElementById('mp3Btn');
  32.         audio.volume = .3;
  33.         $('.btn-audio').click(function() {
  34.             event.stopPropagation();//防止冒泡
  35.             if(audio.paused){ //如果当前是暂停状态
  36.                 $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
  37.                 audio.play(); //播放
  38.                 return;
  39.             }else{//当前是播放状态
  40.                 $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
  41.                 audio.pause(); //暂停
  42.             }
  43.         });
  44.     })
  45.     </script>
复制代码
通过以上方法,audio的样式修改的问题就解决啦,你可以换成你想要的显示效果。

自定义播放器
HTML 代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>自定义播放器</title>
  7.     <link rel="stylesheet" href="./css/zidingyi.css">
  8. </head>

  9. <body>
  10.     <divclass="box">
  11.         <video src="http://edge.ivideo.sina.com.cn/35267794003.mp4?KID=sina,viask&Expires=1600876800&ssig=S8%2B5ZV4tJU&reqid="></video>
  12.         <divclass="menu">
  13.             <!-- 播放器 -->
  14.             <divclass="play">播放</div>
  15.             <!-- 时间 -->
  16.             <divclass="timer">0:0/0:0</div>
  17.             <!-- 进度条 -->
  18.             <divclass="progressBar">
  19.                 <!-- 播放进度 -->
  20.                 <div></div>
  21.                 <!-- 播放的标记 -->
  22.                 <i></i>
  23.             </div>
  24.             <!-- 倍数 -->
  25.             <divclass="times">倍数</div>
  26.             <divclass="time-ul">
  27.                 <ul>
  28.                     <li>2</li>
  29.                     <li>x1.5</li>
  30.                     <li>x1.25</li>
  31.                     <li>正常</li>
  32.                 </ul>
  33.             </div>
  34.             <divclass="vol add">音量加</div>
  35.             <divclass="vol event">音量减</div>
  36.         </div>
  37.     </div>
  38.     <script src="./js/zidingyi.js"></script>
  39. </body>

  40. </html>
复制代码

JS代码如下:
  1. var oVideo = document.querySelector('video');
  2. var oPlay = document.querySelector('.play');
  3. var time = document.querySelector('.timer');
  4. var oProgressbar = document.querySelector('.progressBar');
  5. var oTimes = document.querySelector('.times');
  6. var ul = document.querySelector('.time-ul');
  7. var li = ul.getElementsByTagName('li');
  8. var oAdd = document.querySelector('.add');
  9. var oEvent = document.querySelector('.event');


  10. // 点击播放或者暂停
  11. oPlay.onclick = function() {
  12.     if (oVideo.paused) {
  13.         oVideo.play();
  14.         this.innerHTML ='暂停';
  15.     }else {
  16.         oVideo.pause();
  17.         this.innerHTML ='播放';
  18.     }
  19. }

  20. // 时间
  21. setInterval(function() {
  22.     // 总时长
  23.     var total = oVideo.duration;
  24.     var nowtime = oVideo.currentTime;
  25.     // 时间显示到页面
  26.     time.innerHTML = parseInt(nowtime / 60) +":" + String(parseInt(nowtime % 60)).padStart(2, 0) +'/' + parseInt(total / 60) +':' + String(parseInt(total % 60)).padStart(2, 0);

  27.     // 当前进度条的宽度
  28.     var width = nowtime / total * oProgressbar.clientWidth;
  29.     oProgressbar.getElementsByTagName('div')[0].style.width = width +'px';
  30.     oProgressbar.getElementsByTagName('i')[0].style.width = width +'px';

  31. }, 1000)

  32. // 进度条
  33. oProgressbar.onmouseenter = function() {
  34.     this.style.height ='14px';
  35.     this.style.top ='-14px';
  36.     this.getElementsByTagName('div')[0].style.height ='14px';
  37.     this.getElementsByTagName('i')[0].style.height ='18px';
  38. }

  39. oProgressbar.onmouseleave = function() {
  40.     this.style.height ='2px';
  41.     this.style.top ='-2px';
  42.     this.getElementsByTagName('div')[0].style.height ='2px';
  43.     this.getElementsByTagName('i')[0].style.height ='6px';
  44. }

  45. // 点击进度条,跳转进度
  46. oProgressbar.onclick = function(e) {
  47.     var location = e.layerX;
  48.     var width =this.clientWidth;
  49.     // 计算出目标时间
  50.     var targetTime = location / width * oVideo.duration;
  51.     // 设置当前时间
  52.     oVideo.currentSrc = targetTime;
  53. }

  54. // 倍数
  55. oTimes.onclick = function() {
  56.     ul.style.display ='block';
  57. }
  58. ul.onmouseleave = function() {
  59.     ul.style.display ='none';
  60. }

  61. // 给每一个li注册点击事件
  62. for (var i = 0; i < li.length; i++) {
  63.     // 下标
  64.     li[i].index = i;
  65.     li[i].onclick = function() {
  66.         switch (this.index) {
  67.             case 0:
  68.                 // 两倍
  69.                 oVideo.playbackRate = 2;
  70.                 oTimes.innerHTML ='x2';
  71.                 break;
  72.             case 1:
  73.                 // 1.5倍
  74.                 oVideo.playbackRate = 1.5;
  75.                 oTimes.innerHTML ='x1.5';
  76.                 break;
  77.             case 2:
  78.                 // 1.25倍
  79.                 oVideo.playbackRate = 1.25;
  80.                 oTimes.innerHTML ='x1.25';
  81.                 break;
  82.             default:
  83.                 // 正常
  84.                 oVideo.playbackRate = 1;
  85.                 oTimes.innerHTML ='倍数';
  86.                 break;
  87.                 break;
  88.         }
  89.     }

  90. }
  91. // 音量
  92. oAdd.onclick = function() {
  93.     oVideo.volume = oVideo.volume + 0.1 >= 0 ? 0 : oVideo.volume + 1
  94. }
  95. oEvent.onclick = function() {
  96.     oVideo.volume = oVideo.volume - 0.1 <= 0 ? 0 : oVideo.volume - 1
  97. }
复制代码

CSS代码如下:
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }

  5. .box {
  6.     width: 598px;
  7.     height: 280px;
  8.     border: 1px solid black;
  9.     position: relative;
  10.     margin: 100px auto;
  11. }

  12. video {
  13.     position: absolute;
  14.     width: 598px;
  15.     height: 280px;
  16. }

  17. .menu {
  18.     position: absolute;
  19.     width: 100%;
  20.     height: 50px;
  21.     margin-top: 230px;
  22.     background-color: rgb(0, 0, 0, .5);
  23. }

  24. .play {
  25.     border: 1px solid #fff;
  26.     width: 50px;
  27.     height: 28px;
  28.     border-radius: 8px;
  29.     position: absolute;
  30.     margin-top: 12px;
  31.     margin-left: 20px;
  32.     line-height: 26px;
  33.     text-align: center;
  34.     color: #fff;
  35. }

  36. .timer {
  37.     width: 50px;
  38.     height: 28px;
  39.     border-radius: 8px;
  40.     position: absolute;
  41.     margin-top: 12px;
  42.     margin-left: 120px;
  43.     line-height: 26px;
  44.     text-align: center;
  45.     color: #fff;
  46. }

  47. .times {
  48.     border: 1px solid #fff;
  49.     width: 50px;
  50.     height: 28px;
  51.     border-radius: 8px;
  52.     position: absolute;
  53.     margin-top: 12px;
  54.     margin-left: 400px;
  55.     line-height: 26px;
  56.     text-align: center;
  57.     color: #fff;
  58. }

  59. .progressBar {
  60.     position: absolute;
  61.     width: 100%;
  62.     height: 2px;
  63.     background-color: gray;
  64.     top: -2px;
  65.     left: 0;
  66. }

  67. .progressBar div {
  68.     position: absolute;
  69.     height: 2px;
  70.     background-color: #f40;
  71.     width: 120px;
  72.     left: 0;
  73.     top: 0;
  74. }

  75. .progressBar i {
  76.     position: absolute;
  77.     width: 6px;
  78.     height: 6px;
  79.     border-radius: 3px;
  80.     background-color: #fff;
  81.     left: 120px;
  82.     top: -2px;
  83. }

  84. .time-ul {
  85.     position: absolute;
  86.     width: 90px;
  87.     height: 100px;
  88.     top: -110px;
  89.     left: 380px;
  90.     background-color: rgb(0, 0, 0, .5);
  91.     display: none;
  92. }

  93. .time-ul li {
  94.     display: inline-block;
  95.     width: 100%;
  96.     height: 25px;
  97.     line-height: 25px;
  98.     text-align: center;
  99. }

  100. .time-ul li:hover {
  101.     color: #f40;
  102.     font-weight: bold;
  103. }

  104. .vol {
  105.     position: absolute;
  106.     width: 50px;
  107.     height: 28px;
  108.     text-align: center;
  109.     line-height: 28px;
  110.     color: #fff;
  111.     top: 50%;
  112.     margin-top: -15px;
  113.     cursor: pointer;
  114.     border-radius: 8px;
  115.     border: 1px solid #fff;
  116. }

  117. .add {
  118.     left: 470px;
  119. }

  120. .event {
  121.     left: 530px;
  122. }
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|蓄财网 ( 豫ICP备2021002293号 )

GMT+8, 2021-9-26 11:42 , Processed in 0.108652 second(s), 27 queries .

蓄财网 ©版权所有

© 2021 蓄财网(www.aixc.cn)

快速回复 返回顶部 返回列表