HTML5 Audio API与兼容性

最新推荐文章于 2024-04-19 14:11:46 发布

转载最新推荐文章于 2024-04-19 14:11:46 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wolfx/blog/617379

文章标签：

#前端 #ViewUI

本文详细介绍了HTML5 Audio标签的功能及使用方法，包括控制函数、只读媒体特性、可脚本控制的特性值等内容，并提供了跨浏览器支持的媒体文件类型的对比表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<audio src="音频的地址">备用（当浏览器不支持audio时显示的内容）</audio>

audio 的控制函数主要有：

控制函数功能说明

load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载

play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放

pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有：

只读属性属性说明

duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN

paused 如果媒体文件被暂停，则返回true，否则返回false

ended 如果媒体文件播放完毕，则返回true

startTime 返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区

error 在发生了错误后返回的错误代码

currentSrc 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值：

特性特性说明

autoplay 自动播放已经加载的的媒体文件，或查询是否已设置为autoplay

loop 将媒体文件设置为循环播放，或查询是否已设置为loop

currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置

controls 显示或者隐藏用户控制界面

volume 在0.0到1.0间设置音量值,或查询当前音量值

muted 设置是否静音

autobuffer 媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

现在各个浏览器的最新版本基本上都能跑 HTML5 了，包括 IE 这个让广大前端同学头疼的大家伙。但悲剧的是，各个浏览器所支持的媒体文件类型又不仅相同了，好吧，咱们都习惯了，这些家伙什么时候统一过？看表吧。

音频格式 Chrome Firefox IE9 Opera Safari

OGG 支持支持支持支持不支持

MP3 支持不支持支持不支持支持

WAV 不支持支持不支持支持不支持

小例子:

var currentFile = "";
function playAudio() {
    if (window.HTMLAudioElement) {
        try {
            var oAudio = document.getElementById('audio_player');
            if (oAudio.paused) {
                oAudio.play();
            } else {
                oAudio.pause();
            }
        } catch (e) {
            if (window.console && console.error("Error:" + e));
 
        }
    }
}

转载于:https://my.oschina.net/wolfx/blog/617379