H5音频处理的一些小知识-白红宇

H5音频处理的一些小知识

阅读量：5155 次

发布时间：2019-06-13

本文共 2618 字，大约阅读时间需要 8 分钟。

前言

LiuDaP

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

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

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

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

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

1 2     
     3

这里要注意的是：

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

二、关于audio标签的使用

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

1 2     
     7

如上代码同样会在网页中添加音乐文件。这里要特别提醒一下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来写吧）。

1 2 3 4

5 6 16 17 18

22 23 35

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

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

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

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

1  2  3      4         
      5          6         31     32     33         
     
      34             
      00:00 
      35             
      36                  
       37             
38             
      00:00 
      39         
     
40         44     45     83