H5音频处理的一些小知识

前言

LiuDaP

　十一过后，小编要做一个关于音乐播放器的项目，要用到大量H5音频处理的内容，于是在十月一日国庆黄金周闲暇之际，自己学习了一下H5音频的相关内容。虽然自学的没有那么深入，但是对于像我这种刚刚入行的菜鸟来说做一个简易的音乐播放功能还是有一定帮助的吧，毕竟我也拿着我学的这点东西做出了一个有播放功能的播放器。

　那么今天就给大家介绍一下关于H5音频处理的一些相关知识。

　　其实H5音频处理，就是audio标签的使用与操作，掌握了其中一些我们常用的属性和方法就可以了。

一、关于audio标签的浏览器支持情况

　　对于audio标签，绝大多数主流浏览器还是支持的，但是对于一些IE老用户来说，IE8及以前的版本的浏览器不支持audio标签。下面我们来举个例子看一看。

 <body>

     <audio src="music/guowang.mp3" controls="controls">您的浏览器版本过老了，不支持audio</audio>

 </body>

这里要注意的是：

　　<audio></audio>标签之间的文字将显示在不支持audio标签的浏览器中，支持audio标签的元素不会被显示。

二、关于audio标签的使用

　　上面在介绍浏览器支持情况时，用到了一种写法就是直接给audio添加src属性，下面还有一种方法就是运用source元素进行。具体代码如下：

 <body>

     <audio controls="controls">

         您的浏览器版本过老了，不支持audio

         <source src="music/guowang.mp3"></source>

         <source src="music/guowang.ogg"></source>

     </audio>

 </body>

如上代码同样会在网页中添加音乐文件。这里要特别提醒一下source元素

source元素可以在audio标签中写多个，而且可以写不同格式的音乐，浏览器会自动识别它所支持的那一个文件进行播放。

三、audio标签常用的一些属性和方法

　　1、audio元素中的一些新增属性

　　（1）、controls属性：添加此属性，会给播放器自动添加一些控制播放的控件，如：开始、暂停、进度条、音量控制等。具体效果图如下：

　　（2）、autoplay属性：添加此属性，表示在音频文件就绪后立刻播放

　　（3）、loop属性：添加此属性，表示音乐循环播放。

　　（4）、src属性：要播放的音频地址。

　　利用上面的这些新增的属性，我们就可以在网页中播放自己想要的音乐。但是每个音乐播放器都有自己的界面，都有自己的风格，如果每个播放器都使用这样一个样式那是太俗套了，所以在这些新增的属性基础上，audio元素还为我们提供了许多对象属性和方法，我们可以用js进行DOM操作，来实现更多不一样的播放风格。

　　2、audio元素常用的一些对象属性（属性太多，我就介绍一些经常用到的）

　　（1）、autoplay属性：设置或返回是否音频在加载完成后，随即播放。

　　（2）、currentTime属性：设置或返回当前音频播放的位置，注意：以秒计

　　（3）、defaultMuted属性：设置或返回音频是否为静音

　　（4）、duration属性：返回音频的总时间，注意：以秒计

　　（5）、paused属性：设置或返回音频是否暂停

　　（6）、volume属性：设置或返回音频的音量

　　3、audio元素的一些对象方法

　　（1）、canPlayType()：检查浏览器是否能够播放指定的音频类型

　　（2）、fastSeek()：在音频播放器中指定播放时间

　　（3）、play()：开始播放音频

　　（4）、pause()：暂停当前播放的音频

四、举几个具体的播放器的例子

　　1、js修改音乐播放器的样式

　　<audio></audio>标签给我们提供的controls属性，直接给我们提供了播放器控件的样式，但是我们更加要求播放器的与众不同，喜欢自己设定样式。而要完成这一点的思路其实很简单，就是不用audio标签提供给我们的controls属性，运用js操作DOM的能力来实现。具体代码如下（为了插入代码方便，用原生js来写吧）。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             /*只是给p标签做了一个简单的样式*/

             #play{

                 width: 100px;

                 height: 100px;

                 border-radius: 50px;

                 margin: 10px auto;

                 background-color: blue;

             }

         </style>

     </head>

     <body>

         <!--body部分就用p标签将audio标签包裹就行，改样式直接改p标签-->

         <p id="play">

             <audio id="audio" src="music/guowang.mp3"></audio>

         </p>

     </body>

     <script type="text/javascript">

         var play=document.getElementById("play"); //取到p标签

         var audios=document.getElementById("audio"); //取到audio标签

         play.onclick=function(){

             if(audios.paused){  //进行判断，判断音乐是否在播放

                 audios.play();  //如果音乐是暂停的，点击播放

             }else{

                 audios.pause(); //如果音乐是播放的，点击暂停

             }

             play.style.backgroundColor="yellow";

         }

     </script>

 </html>

　　以上代码写出来的效果图如下：就是一个蓝色的球，点击蓝球，音乐播放，颜色变为黄色。

以上只是一个用来修改样式的小方法，如果大家想要修改更复杂的样式，需要大家自己去写，改样式的思路就在这里，希望能帮到你！！！

　　2、js实现音乐进度条功能

　　<audio></audio>的controls属性也给我们提供了一个进度条的功能，但是它的进度条样式太丑了，下面用js操作DOM来实现进度条的功能。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             /*一些简单的css样式*/

             div{

                 display: flex;

                 justify-content: center;

             }

             #pro{

                 width: 50%;

                 height: 2px;

                 background-color: #CCCCCC;

                 margin: 10px 10px 0px 10px;

                 position: relative;

             }

             #proInner{

                 display: inline-block;

                 width: 1%;

                 height: 2px;

                 background-color: red;

                 position: absolute;

             }

             #btn{

                 display: block;

                 margin: 10px auto;

             }

         </style>

     </head>

     <body>

         <div>

             <span id="timeStart">00:00</span> <!--动态时间-->

             <p id="pro">

                 <span id="proInner"></span> <!--红色进度条-->

             </p>

             <span id="timeAll">00:00</span> <!--音乐总时间-->

         </div>

         <button id="btn">

             点击播放/暂停音乐

             <audio id="audio" src="music/guowang.mp3"></audio>

         </button>

     </body>

     <script type="text/javascript">

         //取到相应的元素

         var btn=document.getElementById("btn");

         var play=document.getElementById("audio");

         var timeAll=document.getElementById("timeAll");

         var timeStart=document.getElementById("timeStart");

         var proInner=document.getElementById("proInner");

         //点击播放事件

         btn.onclick=function(){

             timeAll.innerText=formatTime(play.duration); //获取音乐播放总时间，转化为几分几秒并丢给timeAll

             if(play.currentTime<play.duration){

                 //每隔以秒获取一次当前音乐播放的时间

                 var timeOutId=setInterval(function(){

                     timeStart.innerText=formatTime(play.currentTime);

                     var a=(play.currentTime/play.duration)*100; //当前播放时间占总时间的多少

                     proInner.style.width=a+"%"; //每隔一秒宽度增加百分之a

                 },1000);

             }else{

                 clearInterval(timeOutId);

             }

             if(play.paused){ //判断音频是否播放

                 play.play(); //如果暂停，点击播放

             }else{

                 play.pause(); //如果播放，点击暂停

             }

         }

         //时间转化函数，将秒转化为几分几秒的形式

         function formatTime(seconds){

             return[

                 parseInt(seconds/60%60),

                 parseInt(seconds%60)

             ]

             .join(":")

             .replace(/\b(\d)\b/g, "0$1");

         }

     </script>

 </html>

　　根据以上代码所展示出来的效果图如下：这只是实现了一个进度条跟随音乐不断前进的功能。

以上只是一个例子，如果原理会了之后，你想要改什么样的样式就可以改成什么样的样式，这个还是需要大家自己去写的！！！

　　由于时间的原因，今天的博客就写到这里吧，以后如果我时间空余的话还会继续写一些关于H5音频处理的小功能，今天就先简单介绍这点内容吧！！

编者按

　　我们都是在这条路上奔跑着的孩子，让我们相互学习，共同努力吧！！！希望今天这点儿小内容对大家有一点点帮助吧，毕竟我也是一个初入江湖的小菜鸟啊！！