html5 -audio-移动端如何自动播放

最新推荐文章于 2025-06-04 20:00:00 发布

转载最新推荐文章于 2025-06-04 20:00:00 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/changxue/p/9576470.html

文章标签：

#移动开发

本文详细介绍了HTML中audio标签的基本用法及其属性设置，包括autoplay、controls等，并通过JavaScript实现对音频播放的控制。同时，针对移动端如微信浏览器不支持自动播放的问题提供了相应的解决方案。

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

最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用，对于audio相关的常用知识点以及一些相关的问题如下：

　　 <audio id="audios" src="xxxx.mp3" autoplay controls="controls">
        您的浏览器不支持 audio 标签。
    </audio>
    不支持audio元素的浏览器会显示标签内文字
    
    audio相关属性：
        src:音频地址
        autoplay:音频加载完毕后自动播放。
        controls:显示播放控制条。
        loop:播放完毕后会重复播放。
        preload: auto 预加载音频视频。metadata 只预加载音频视频元数据。 有autoplay时此属性无效。
        
    js控制媒体
        play()    播放
        pause()    暂停
        load()    重新加载
    
    相关事件：    
        oncanplay       //在用户可以开始播放视频/音频（audio/video）时触发（页面加载完毕）
        onerror            //在音频/视频(audio/video)加载发生错误时触发
        ontimeupdate    //在视频/音频（audio/video）当前的播放位置发送改变时触发  event.currentTime
        onended            //在视频/音频（audio/video）播放结束时触发
    
    微信端和手机不能支持自动播放问题
        原因是：android ios 内部原因 为了节省流量，规定不自动播放音频视频
        解决方法：
            //--创建页面监听，等待微信端页面加载完毕 触发音频播放
            document.addEventListener('WeixinJSBridgeReady', function() {
                document.getElementById('audios').play()
            })

            //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
            document.addEventListener('touchstart', function() {
                document.getElementById('audios').play()
            })