html5 audio 标签autoplay="autoplay"在手机预览网页无法自动播放背景音乐

Posted 2023-04-22

代码如下<audio id="playy" src="music1.mp3" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>，在PC端，打开网页是可以自动播放音乐，但是用手机浏览却没有自动播放，求大神解答!
手机浏览器打开网页是无法自动播放背景音乐，但是顾客点击暂停按钮，再点击播放按钮，也可在手机里播放音乐，UC，谷歌手机浏览器都测试过。

为了防止不必要的自动播放浪费流量，手机网页访问带有audio的页面是不会自动播放的。
Safari屏蔽了autoplay，必须由用户交互事件触发，因为autoplay在移动网络环境下可能会造成用户流量费剧增
android的我不清楚，下面是引自Safari Reference
In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the javascript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action. 参考技术A 移动端浏览器大部分是禁用video和audio的autoplay功能
并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。
这样做主要是为了防止不必要的自动播放浪费流量追问

那么能不能够强制加载页面就播放背景音乐呢

追答

大多数移动端浏览器强制只要交互过一次后才能通过代码控制播放，无法强制，是浏览器故意这么做的

本回答被提问者和网友采纳 参考技术B

可以自动播放的我已经实现了  手机打开测试一下就知道了！ 移动端网页自动播放音乐

audio标签+JS实现音乐播放和暂停的功能

此处以点击音乐图片sndctrl实现功能举例：

HTML部分：

<div class="sndctrl">
　　<img class="homeLoadingImg" data-src="images/a01.png"><i></i>
　　<audio id="audio" src="media/music.mp3" autoplay></audio>
</div>

JS部分：

/*
函数名称：music()
功 能：播放背景音乐
*/
function music() {
　　var audio=document.getElementById("audio");
　　var sndplay=false;
　　$("html,body").one("touchstart",function(){
　　　　sndplay=true;
　　　　audio.play();
　　});
　　audio.addEventListener("ended",function(e){
　　　　sndplay=true;
　　　　audio.play();
　　},false);
　　$(".sndctrl").click(function(){
　　if(sndplay){
　　　　audio.pause();
　　　　$(this).find("i").show();
　　　}else{
　　　　audio.play();
　　　　$(this).find("i").hide();
　　}
　　　　sndplay=!sndplay;
　　});
};

最后记得在自己代码合适位置调用music()