H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)
- <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写法)的更多相关文章
- IOS AudioServicesPlaySystemSound 后台锁屏播放
AudioServicesPlaySystemSound 想在锁屏后台播放报警提示音. 添加了UIBackgroundModes,audio,官方审核不通过! IOS的闹钟是怎么实现的,锁屏不能播放声 ...
- 微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
- [HTML]音乐自动播放(兼容微信)
文件下载:音乐自动播放(兼容微信).zip <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- ios上视频与音乐合成后出现播放兼容问题的解决方法
近期EasyDarwin开源流媒体团队EasyVideoRecorder小组同学Carl在支持一款短视频应用上线时,遇到一个问题:我们在IOS上合成"图片+音乐"成为视频之后,在P ...
- 微信iOS WKWebview 网页开发适配指南
微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的 ...
- Flex布局新旧混合写法详解(兼容微信)
原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...
- 在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)
会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...
- iOS中 MPMoviePlayer 实现视频音频播放 作者:韩俊强
ios播放视频文件一般使用 MPMoviePlayerViewController 和 MPMoviePlayerController.前者是一个view,后者是个Controller.区别就是 MP ...
随机推荐
- 关于自学C语言开始时应该注意的问题分享—未完待续......
---恢复内容开始--- 自学C语言编程总结 第1章C语言概述 1. 如果用户将主函数的返回值类型定义为了void,则不需要返回任何值: 2. C语言的基本结构包括主函数和程序体两部分 ...
- 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图
第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...
- 洪水!(Flooded! ACM/ICPC World Final 1999,UVa815)
题目描述:竞赛入门经典的习题4-10 解题思路:1.把各个网格想象成一个数组 2.排序 3.雨水总体积去铺满 //太懒了只写了求海拔 #include <stdio.h> #define ...
- 【转】: 《江湖X》开发笔谈 - 热更新框架
前言 大家好,我们这期继续借着我们工作室正在运营的在线游戏<江湖X>来谈一下热更新机制以及我们的理解和解决方案.这里先简单的介绍一下热更新的概念,熟悉这部分的朋友可以跳过,直接看我们的方案 ...
- Java学习笔记-11.运行期间类型鉴定
1.Class对象的getClasses()方法获取的是该类中所有的公共的内部类,以及从父类,父接口继承来的内部类.getinterfaces()方法返回类继承的所有接口. import javax. ...
- 使用Zabbix监控rabbitmq服务
添加rabbitmq脚本 [root@controller rabbitmq]# cd /etc/zabbix/script/rabbitmq [root@controller rabbitmq]# ...
- Matlab提速方法
1. 向量化. 尽量少用for循环. 2. 循环竖着走比横着走快. 3. 内置函数也有优化的空间 不少内置函数都有大量的error check.直接用profiler找出真正干活的.不少内置函数在网上 ...
- Bcp 使用心得【转】
在做这方面研究的时候,的确遇到了不少麻烦. 首先在做bcp的时候,要开通大数据量访问权限 一.基于sql语句的导入导出 如果是基于SQL语句的导入导出,需要使用存储过程“master..xp_cmds ...
- linux 文件已经删除,但是空间没有释放的原因
监控系统报告一台服务器的空间满了,登陆后发现/tmp下有大量access_log文件,分析是Apache的日志文件很久没有清理了,确认并执行删除操作. 但是,问题来了,执行 rm /tmp/acces ...
- 嵌入式码农的10年Bug调试经验,值得一看
下面这些都是我经历过的会导致难点bug的问题: 1.事件顺序.在处理事件时,提出下列问题会很有成效:事件可以以不同的顺序到达吗?如果我们没有接收到此事件会怎么样?如果此事件接连发生两次会怎么样?哪怕通 ...