【前端】手机端网页自动播放背景音乐相关资料

简介: 做手机端活动页面的时候,经常会遇到打开页面自动播放背景音乐的需求。但是很多开发人员在实现这个需求时会遇到各种各样不能自动播放或有些场景可以有些场景不行的现象,现在总结一下手机端自动播放背景音乐的资料。

做手机端活动页面的时候,经常会遇到打开页面自动播放背景音乐的需求。但是很多开发人员在实现这个需求时会遇到各种各样不能自动播放或有些场景可以有些场景不行的现象,现在总结一下手机端自动播放背景音乐的资料。

程序媛镇楼
1

首先从正常的代码开始:

<audio autoplay  src="url.mp3"></audio>

【andriod】
支持场景:
QQ浏览器
QQ(QQ内置了QQ浏览器,当然能打开)
微信(都是腾讯的,难道内核一样?)
系统自带浏览器

不支持场景:
chrome

【ios】
支持场景:

不支持场景:
safari

然后是改进的代码开始:
方案1:用video的append,然而并没什么卵用

<div id="bgmvideo">
</div>

<script type="text/javascript"> 
$(document).ready(function () {  
            if (!sessionStorage.getItem("bgm")) {  
                 $("#bgmvideo").append(  
                    '<audio src="url.mp3" autoplay hidden></audio>'  
                );  
                sessionStorage.setItem("bgm", 1)  
            }  
        })  
</script>

方案2:针对大部分IOS系统和少部分不支持自动播放的Android微信
监听WeixinJSBridgeReady事件、DOMContentLoaded事件
微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"。
发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
所以,为了保险起见,可以同时监听两个事件,以增强其适用性。
代码如下:

<audio style="display:none; height: 0" id="bg-music" preload="auto" src="url.mp3" loop="loop"></audio>
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

方案3:触屏播放,等同于按了播放按钮

$('html').one('touchstart',function(){ 
audio.play(); 
}
});

("body").one("touchstart",
audio.play(); 
});

优点:兼容所有场景。
缺点:不是真正的自动播放,用户不触屏就不会播放。且为避免重复播放,应再改进为在新建全屏透明层上触发事件,触发后同时关闭该层。
备注:此代码测试未通过。

方案4:一个自信满满的方案,然而测试后,各种场景都无效,还不如默认的……
http://blog.csdn.net/sinat_33750162/article/details/54630112

其他参考:
部分App不支持webview音乐自动播放
  解决方案:1.壳浏览器支持;2.通过手势事件播放音乐

  完整代码:

// 音乐播放
function autoPlayMusic() {
    // 自动播放音乐效果,解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener('touchstart', musicInBrowserHandler);
    }
    document.body.addEventListener('touchstart', musicInBrowserHandler);

    // 自动播放音乐效果,解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
    var media = document.querySelector('#bg-music');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}
相关文章
|
5天前
|
缓存 前端开发 开发者
前端性能优化:提升网页加载速度的最佳实践
【2月更文挑战第8天】 在当今互联网时代,网页的加载速度直接影响着用户体验和网站的流量。本文将介绍前端性能优化的最佳实践,包括减少HTTP请求、压缩资源、使用CDN加速、懒加载等技术手段,帮助开发者提升网页加载速度,提升用户体验。
14 6
|
2月前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
|
3月前
|
前端开发 JavaScript API
前端 npm anywhere 与 npm now 网页随时真机测试
前端 npm anywhere 与 npm now 网页随时真机测试
31 0
|
5月前
|
前端开发 开发工具
前端基础 - 网页调试工具NetWork
前端基础 - 网页调试工具NetWork
53 0
前端基础 - 网页调试工具NetWork
|
2天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的关键技巧
【2月更文挑战第11天】 在当今互联网高速发展的时代,网页加载速度成为影响用户体验和网站成功的重要因素。本文将深入探讨前端性能优化的关键技巧,包括资源压缩、图片优化、HTTP缓存、代码精简等方面,为前端开发者提供实用的指导和建议。
|
4天前
|
前端开发 JavaScript 搜索推荐
前端性能优化:提升网页加载速度的关键技巧
【2月更文挑战第9天】 在当今互联网时代,网页加载速度直接关系到用户体验和网站流量。本文将介绍前端性能优化的关键技巧,包括图片优化、代码压缩、资源合并等方法,帮助开发者提升网页加载速度,提升用户满意度。
8 2
|
12天前
|
缓存 前端开发 JavaScript
如何优化前端网页性能
网页性能是用户体验的重要因素之一,许多因素会影响网页的性能,包括加载时间、响应速度和渲染时间等。本文将介绍如何优化前端网页性能,从减少HTTP请求数、压缩资源、使用CDN以及异步加载等方面入手,为读者提供实用的技巧和建议。
|
1月前
|
自然语言处理 前端开发 JavaScript
TypeScript实战——ChatGPT前端自适应手机端,PC端
TypeScript实战——ChatGPT前端自适应手机端,PC端
|
6月前
|
Web App开发 前端开发 JavaScript
day01_认识前端_Web 、网页、浏览器
day01_认识前端_Web 、网页、浏览器
day01_认识前端_Web 、网页、浏览器
|
2月前
|
前端开发 JavaScript Android开发
【web前端技术】判断是否是手机端
【web前端技术】判断是否是手机端
32 0

相关产品

  • 云迁移中心