1. <template>
  2. <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio>
  3. <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')">
  4. <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}">
  5. </div>
  6. </template>
  7.  
  8. export default {
  1. data() {
  2. return {
  3. playFlag: true,
  4. playImg: require('../../static/play.png'),
  5. pauseImg: require('../../static/pause.png'),
  6. clickMusicBtn: false
  7. }
  8. },
  1. mounted() {
  1. this.audioAutoPlay('bgMusic');
  2.  
  3. document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q
  4. if (this.clickMusicBtn) { // 点击了关闭音乐按钮
  5. if (this.playFlag) {
  6. this.audioAutoPlay('bgMusic');
  7. this.playFlag = true;
  8. } else {
  9. this.audioPause('bgMusic');
  10. this.playFlag = false;
  11. }
  12.  
  13. text.innerHTML = e.hidden;
  14. if (e.hidden) { // 网页被挂起
  15. this.audioAutoPlay('bgMusic');
  16. this.playFlag = true;
  17. } else { // 网页被呼起
  18. this.audioPause('bgMusic');
  19. this.playFlag = false;
  20. }
  21. } else { // 未点击关闭音乐按钮
  22. if (this.playFlag) {
  23. this.audioPause('bgMusic');
  24. this.playFlag = false;
  25. } else {
  26. this.audioAutoPlay('bgMusic');
  27. this.playFlag = true;
  28. }
  29.  
  30. text.innerHTML = e.hidden;
  31. if (e.hidden) { // 网页被挂起
  32. this.audioPause('bgMusic');
  33. this.playFlag = false;
  34. } else { // 网页被呼起
  35. this.audioAutoPlay('bgMusic');
  36. this.playFlag = true;
  37. }
  38. }
  39. });
  1. },
  1. methods: {
  1. bgMusicPlayOrPause(id) {
  2. this.clickMusicBtn = !this.clickMusicBtn;
  3. if (this.playFlag) {
  4. this.audioPause(id);
  5. this.playFlag = false;
  6. } else {
  7. this.audioAutoPlay(id);
  8. this.playFlag = true;
  9. }
  10. },
  11. audioPause(id) {
  12. var audio = document.getElementById(id);
  13. audio.pause();
  14. document.addEventListener("WeixinJSBridgeReady", function () {
  15. audio.pause();
  16. }, false);
  17. document.addEventListener('YixinJSBridgeReady', function () {
  18. audio.pause();
  19. }, false);
  20. },
  21. audioAutoPlay(id) {
  22. var audio = document.getElementById(id);
  23. audio.play();
  24. document.addEventListener("WeixinJSBridgeReady", function () {
  25. audio.play();
  26. }, false);
  27. document.addEventListener('YixinJSBridgeReady', function () {
  28. audio.play();
  29. }, false);
  30. }
  31. }
  32. }

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. 关于自学C语言开始时应该注意的问题分享—未完待续......

    ---恢复内容开始--- 自学C语言编程总结 第1章C语言概述 1.     如果用户将主函数的返回值类型定义为了void,则不需要返回任何值: 2.     C语言的基本结构包括主函数和程序体两部分 ...

  2. 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图

    第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...

  3. 洪水!(Flooded! ACM/ICPC World Final 1999,UVa815)

    题目描述:竞赛入门经典的习题4-10 解题思路:1.把各个网格想象成一个数组 2.排序 3.雨水总体积去铺满 //太懒了只写了求海拔 #include <stdio.h> #define ...

  4. 【转】: 《江湖X》开发笔谈 - 热更新框架

    前言 大家好,我们这期继续借着我们工作室正在运营的在线游戏<江湖X>来谈一下热更新机制以及我们的理解和解决方案.这里先简单的介绍一下热更新的概念,熟悉这部分的朋友可以跳过,直接看我们的方案 ...

  5. Java学习笔记-11.运行期间类型鉴定

    1.Class对象的getClasses()方法获取的是该类中所有的公共的内部类,以及从父类,父接口继承来的内部类.getinterfaces()方法返回类继承的所有接口. import javax. ...

  6. 使用Zabbix监控rabbitmq服务

    添加rabbitmq脚本 [root@controller rabbitmq]# cd /etc/zabbix/script/rabbitmq [root@controller rabbitmq]# ...

  7. Matlab提速方法

    1. 向量化. 尽量少用for循环. 2. 循环竖着走比横着走快. 3. 内置函数也有优化的空间 不少内置函数都有大量的error check.直接用profiler找出真正干活的.不少内置函数在网上 ...

  8. Bcp 使用心得【转】

    在做这方面研究的时候,的确遇到了不少麻烦. 首先在做bcp的时候,要开通大数据量访问权限 一.基于sql语句的导入导出 如果是基于SQL语句的导入导出,需要使用存储过程“master..xp_cmds ...

  9. linux 文件已经删除,但是空间没有释放的原因

    监控系统报告一台服务器的空间满了,登陆后发现/tmp下有大量access_log文件,分析是Apache的日志文件很久没有清理了,确认并执行删除操作. 但是,问题来了,执行 rm /tmp/acces ...

  10. 嵌入式码农的10年Bug调试经验,值得一看

    下面这些都是我经历过的会导致难点bug的问题: 1.事件顺序.在处理事件时,提出下列问题会很有成效:事件可以以不同的顺序到达吗?如果我们没有接收到此事件会怎么样?如果此事件接连发生两次会怎么样?哪怕通 ...