Html5-audio标签简介及手机端不自动播放问题-优快云博客

本文介绍了HTML5音频标签的基本用法及属性设置，并通过JavaScript实现了不同场景下的音频播放控制，包括解决移动端自动播放限制的方法。

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

1、audio:html5音频标签

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>

不支持audio元素的浏览器会显示标签内文字

src:音频地址

autoplay:音频加载完毕后自动播放。

controls:显示播放控制条。

loop:播放完毕后会重复播放。

preload:1)auto 预加载音频视频。2）metadata 只预加载音频视频元数据。有autoplay时此属性无效。

（h5 推荐使用OGG Vobis格式）

2、js控制媒体

play()播放

pause()暂停

load()重新加载

3、微信端和手机不能支持自动播放问题

原因是：android ios 内部原因为了节省流量，规定不自动播放音频视频

所以采用以下方式解决

//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});