近日有一个项目出现audio无法自动播放，查看原因才发现是微信版本更新为7.0.8版本，需要有交互行为，第一次播放需要用户手动点击一下，无法使用DOM中的play()进行直接播放操作，那怎么办呢？

通过微信社区看到了它们说的可以通过web audio api解决，但是看了一下太麻烦了，所以就没用，然后还想到了一种解决办法，就是打开前给当前操作页面加一个引导页，主要是为了第一次触发audio，将其激活，然后用户再操作audio的时候再使用audio.play()就可以了;

代码如下：

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .box1{

        position: absolute;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, .5);

    }

    </style>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>

<body>

    <div class="box1" onclick="buttom()">

        点击

    </div>

    <audio id="audio" src="" controls></audio>

</body>

<script>

function buttom(){

   var audio=document.getElementById("audio");

   audio.play();

   audio.setAttribute("src","../music/1.mp3");
　　$("#box1").hide();
} </script> </html>

用户进行第一次交互之后，后面就可以自行播放了。

摇一摇—微信7.0.8版本audio无法自动播放问题的更多相关文章

  1. 微信7.0以上版本fiddler、Charles抓包报HTTPS证书信任问题通报

    通报:微信更新到7.0以后抓包公众号会有证书问题,抓包小程序直接不能打开 各位不用到处找了,也不用怀疑人生了,你没有问题.win10也没有问题.fiddler和Charles也没有问题,是因为微信更新 ...

  2. 微信的audio无法自动播放的问题

    一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...

  3. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  4. 微信video和audio无法自动播放解决方案

    //音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...

  5. 关于微信H5页面开发中音乐不自动播放的解决方法

    我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...

  6. 解决 iOS 9.1 微信内置浏览器中html audio 不能自动播放的问题

    使用微信现在提供过的微信js-sdk 在ready中进行播放便可. 首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin ...

  7. 在ios中微信video和audio无法自动播放解决方案

    WeixinJSBridgeReady页面初始化的时候会执行 document.addEventListener("WeixinJSBridgeReady", function ( ...

  8. 玩转Android之加速度传感器的使用，模仿微信摇一摇

    Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇 ...

  9. js微信摇一摇功能以及api

    一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. 浅谈单利模式及其应用场景(Python)

    python 中的单利模式 使用场景: + Python的logger就是一个单例模式,用以日志记录 + Windows的资源管理器是一个单例模式 + 线程池,数据库连接池等资源池一般也用单例模式 + ...

  2. Mac将本地文件上传到Centos7(Linux)服务器上

    1.打开终端,输入命令: scp /Users/codez/Downloads/jdk-8u144-linux-x64.tar.gz root@139.224.235.xxx:/root/java/j ...

  3. C语言程序转汇编代码

    最近在学着写bootloader,由于汇编太繁杂,希望可以使用C语言完成一部分,然后转成NASM汇编代码,经过摸索,最终找到了一个解决方案,记录于此,留作参考. 核心步骤 使用gcc编译得到.o文件 ...

  4. C# 利用委托事件进行窗体间的传值（新手必看）

    引言: 窗体间传值是每个学习WinForm新手的常见问题,最初级的方法就是 在窗体中先获取到要接受值窗体.然后通过.得到某个空间或者属性,直接赋值,这个需要接收放的窗体属性或者空间必须是public ...

  5. c# 匿名方法（函数） 匿名委托 内置泛型委托 lamada

    匿名方法:通过匿名委托 .lamada表达式定义的函数具体操作并复制给委托类型: 匿名委托:委托的一种简单化声明方式通过delegate关键字声明: 内置泛型委托:系统已经内置的委托类型主要是不带返回 ...

  6. 学习 Vim 命令总结

    学习 Vim 命令总结 可以使用 vscode-vim 扩展,但是要注意一些ctrl+字母的快捷键会无效,必须去掉冲突的快捷键 esc 回到普通模式 i 普通模式进入插入模式 : 进入命令模式 :wa ...

  7. Centos7之selinux配置

    selinux是一个重要的lunux安全机制,存在于linuxKernel中,默认是开启的,会对用户行为做出多种限制,为了方便操作,有时候需要关闭它: 查看selinux状态:/usr/sbin/se ...

  8. 使用Sqlserver 2012 导出表数据为SQL脚本

    目录 前言 具体步骤 前言 很多时候,我们需要把数控库中的表的数据导出成SQL脚本的情形.然后,在别的库执行的情况. 以下,总结使用Sqlserver 2012数据库中表数据导出成SQL脚本的步骤. ...

  9. 重启防火墙（iptables)命令#service iptable restart失效

    Redirecting to /bin/systemctl restart iptables.ser linux下执行防火墙相关指令报错: Redirecting to /bin/systemctl ...

  10. Debian 10 xfce 错误提示 ACCESS DENIED

    闲来无事重新安装自己的服务器发现很多关于Debian的初始安装问题都已经陌生了在此重新整理下自己安装所遇到的问题: ACCESS DENIED  释: 登录成功拒绝Root密码访问 解决方法: loc ...