html5中audio播放器标签属性整理

痛定思痛。 2022-12-20 06:11 152阅读 0赞

### html5中audio播放器标签属性整理 ###

*   *  HTML5 元素
     *  audio播放器隐藏
     *  audio标签控制函数功能说明
     *  audio 可脚本控制的特性值
     *  只读属性属性说明

## HTML5 元素 ##

元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

<audio controls="controls">
      <source src="qipa250.mp3" type="audio/mp3" />
      <source src="qipa250.ogg" type="audio/ogg" />
    Your browser does not support this audio format.
    </audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。  
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。  
问题：

> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。  
> 您必须把音频文件转换为不同的格式。  
> 元素在老式浏览器中不起作用。  
> 注释：使用 (HTML5) 解决验证问题。

最好的 HTML 解决方法

上面的例子使用了两个不同的音频格式。HTML5 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 元素。

问题：

> 您必须把音频转换为不同的格式。  
> 元素无法通过 HTML 4 和 XHTML 验证。  
> 元素无法通过 HTML 4 和 XHTML 验证。  
> 元素无法回退来显示错误消息。  
> 注释：使用 (HTML5) 解决验证问题。

## audio播放器隐藏 ##

<audio style="display: none" id="mp3audio" autoplay="autoplay" src="https://www.qipa250.com/Baidu_Mp3/qipa250.mp3">
        <source src="https://www.qipa250.com/Baidu_Mp3/qipa250.mp3" type="audio/mpeg" id="beijingyine">
        您的浏览器不支持 audio 元素。
    </audio>

播放器样式隐藏，自动播放mp3文件

## audio标签控制函数功能说明 ##

> load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载  
> play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放  
> pause()：暂停处于播放状态的音频、视频文件

## audio 可脚本控制的特性值 ##

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

## 只读属性属性说明 ##

> duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN  
> paused：如果媒体文件被暂停，则返回true，否则返回false  
> ended：如果媒体文件播放完毕，则返回true  
> startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区  
> error：在发生了错误后返回的错误代码  
> currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3。幸好Google的chrome都支持。

代码如下：  
mp3.html

mp3.css

body{ 
            background:#2b2938;
        }
    .btn-audio{ 
            margin: 90px auto;
            width: 186px;
            height: 186px;
            background:url(images/voice_stop.png) no-repeat center bottom;
            background-size:cover;
        }

mp3.js

通过以上方法，audio的样式修改的问题就解决啦，你可以换成你想要的显示效果。