<template>
<audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio>
<div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')">
<img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}">
</div>
</template> export default {
    data() {
return {
playFlag: true,
playImg: require('../../static/play.png'),
pauseImg: require('../../static/pause.png'),
clickMusicBtn: false
}
},
    mounted() {
        this.audioAutoPlay('bgMusic');

        document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
if (this.clickMusicBtn) { // 点击了关闭音乐按钮
if (this.playFlag) {
this.audioAutoPlay('bgMusic');
this.playFlag = true;
} else {
this.audioPause('bgMusic');
this.playFlag = false;
} text.innerHTML = e.hidden;
if (e.hidden) { // 网页被挂起
this.audioAutoPlay('bgMusic');
this.playFlag = true;
} else { // 网页被呼起
this.audioPause('bgMusic');
this.playFlag = false;
}
} else { // 未点击关闭音乐按钮
if (this.playFlag) {
this.audioPause('bgMusic');
this.playFlag = false;
} else {
this.audioAutoPlay('bgMusic');
this.playFlag = true;
} text.innerHTML = e.hidden;
if (e.hidden) { // 网页被挂起
this.audioPause('bgMusic');
this.playFlag = false;
} else { // 网页被呼起
this.audioAutoPlay('bgMusic');
this.playFlag = true;
}
}
});
    },
methods: {
    bgMusicPlayOrPause(id) {
this.clickMusicBtn = !this.clickMusicBtn;
if (this.playFlag) {
this.audioPause(id);
this.playFlag = false;
} else {
this.audioAutoPlay(id);
this.playFlag = true;
}
},
audioPause(id) {
var audio = document.getElementById(id);
audio.pause();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.pause();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.pause();
}, false);
},
audioAutoPlay(id) {
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
}
}

H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)的更多相关文章

  1. IOS AudioServicesPlaySystemSound 后台锁屏播放

    AudioServicesPlaySystemSound 想在锁屏后台播放报警提示音. 添加了UIBackgroundModes,audio,官方审核不通过! IOS的闹钟是怎么实现的,锁屏不能播放声 ...

  2. 微信h5,背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

  3. [HTML]音乐自动播放(兼容微信)

    文件下载:音乐自动播放(兼容微信).zip   <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  5. ios上视频与音乐合成后出现播放兼容问题的解决方法

    近期EasyDarwin开源流媒体团队EasyVideoRecorder小组同学Carl在支持一款短视频应用上线时,遇到一个问题:我们在IOS上合成"图片+音乐"成为视频之后,在P ...

  6. 微信iOS WKWebview 网页开发适配指南

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的 ...

  7. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  8. 在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)

    会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...

  9. iOS中 MPMoviePlayer 实现视频音频播放 作者:韩俊强

    ios播放视频文件一般使用 MPMoviePlayerViewController 和 MPMoviePlayerController.前者是一个view,后者是个Controller.区别就是 MP ...

随机推荐

  1. jmeter获取cookies

    使用场景:登录后,后续的请求操作需获取到JSESSIONID才可进行 1.将jmeter的bin目录下的jmeter.properties文件中的CookieManager.save.cookies= ...

  2. Python2快速入门教程,只需要这十五张图片就够了!

    今天给大家分享的教程是适用于Python 2.7,但它可能适用于Python 2.Python 2.7将停止在2020中的支持. 与Python 2.7和3兼容的Python代码是完全可能的.通过使用 ...

  3. leetcode-全排列详解(回溯算法)

     全排列     给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2 ...

  4. 【zabbix 监控】第一章 zabbix的安装配置

    安装前准备 一.下载网络yum源: http://mirrors.163.com/.help/centos.html https://opsx.alibaba.com/mirror 1.首先备份/et ...

  5. zabbix 2.2.2 安装部署

    zabbix 2.2.2版本与1.8.3版本安装过程略有不同,下面为实施步骤: 服务端:172.16.1.61 客户端:172.16.1.8 搭建zbbix软件 安装LAMP环境及依赖包 [root@ ...

  6. HDU 2487 Ugly Windows(暴力)(2008 Asia Regional Beijing)

    Description Sheryl works for a software company in the country of Brada. Her job is to develop a Win ...

  7. Calculator 2

    github地址:https://github.com/YooRarely/object-oriented.git 新增: 计算类(拥有计算功能) 采用符号优先级计算方法 对符号不匹配的如 -2 ,自 ...

  8. array_intersect_assoc 与array_intersect区别

    1.array_intersect_assoc — 带索引检查计算数组的交集 说明 array array_intersect_assoc ( array $array1 , array $array ...

  9. C#里面Console.Write()和Console.WriteLine()有什么区别?

    Console.Write()和Console.WriteLine()都是System.Console提供的方法,两着主要用来将输出流由指定的输出装置(默认为屏幕)显示出来.两着间的差异在Consol ...

  10. struts如何在Action类中操作request,session

    在servlet中,通过request.getparameter与setparameter来实现后端与前端jsp页面的数据交互,那么在struts中,也有几种方式来操作request,session实 ...