环境:移动端、浏览器、微信

问题:音乐不自动播放问题

原因:

1、微信端(前置条件添加音乐的时候一定要设置自动播放),有的时候同一款手机、统一个微信版本,会出现音乐不自动播放的问题,无解~~~~~~~(未找到原因)

2、浏览器,目前以Safari为代表的很多浏览器默认会禁止掉音乐自动播放

解决办法:

直接上代码

HTML

<audio src="music.mp3" id="audio" autoplay preload controls loop="loop"></audio>

Script

var audio = document.getElementById('audio');
       var play = function(){
             audio.play();
             document.removeEventListener('touchstart' , play , false);
        };
        document.addEventListener('WeixinJSBridgeReady' , function(){
             play();
        });

document.addEventListener('touchstart' , play , false);

微信端手动去监听微信加载完成事件

浏览器端去监听手动滑动事件

H5音乐播放方案的更多相关文章

  1. 【H5 音乐播放实例】第一节 音乐详情页制作(1)

    本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...

  2. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  3. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  4. H5音乐播放器源码地址

    源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA      安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...

  5. H5音乐播放器源码共享

    由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w   H5源码!暂时只支持手机适配,电脑端 ...

  6. H5音乐播放器【歌单列表】

    上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...

  7. 【前端】h5音乐播放demo 可关闭可播放

    复制如下代码,直接可预览(记得把超链接换成自己本地路径) <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. 使用余弦定理制作磁盘形状h5音乐播放器

    目录 [1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看 功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...

  9. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

随机推荐

  1. swtich和case语句中,定义变量要加花括号

    转自: http://blog.chinaunix.net/uid-27103408-id-3340702.html http://www.xuebuyuan.com/2070170.html swi ...

  2. 有序无序Ul->Li Ol->Li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单(变形2 ---修饰)

    从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...

  3. 最长公共子序列(LCS) Medium2

    The company "21st Century Fruits" has specialized in creating new sorts of fruits by trans ...

  4. LINQ 推迟查询的执行

    LINQ 在运行期间定义查询表达式时.查询就不会运行.查询会在迭代数据项是运行,例如: static void Main(string[] args) { List<string> lis ...

  5. Rust学习笔记1

    这是一份不错的rust教程,目前包括4个block和4个project.全部完成后可以用rust实现一个简单的key-value存储引擎. 注意:Windows下rust貌似会遇到一些bug,强烈建议 ...

  6. HTML-美化

    1.美化文本 1.1第一部分 font-size:字体大小,常用em.px.%.rem作单位,预设值small.large.medium,可继承, font-weight:加粗字体,属性为bold,加 ...

  7. 50. Pow(x, n) (JAVA)

    Implement pow(x, n), which calculates x raised to the power n(xn). Example 1: Input: 2.00000, 10 Out ...

  8. iOS 设备尺寸以及图标尺寸

    iPhone 4和iPod Touch 4有一个新的特性:在屏幕尺寸不变的前提下,分辨率提升一倍(320 x 480 => 640 x 960).苹果将这个特性命名为Retina. 用苹果的话讲 ...

  9. 继续死磕python

    一.数据运算 算术运算 比较运算 赋值运算 逻辑运算 成员运算 身份运算 位运算 其中左右移运算是逻辑左右移即缺失位补0,而算数右移缺失补符号位(注意逻辑运算都是补码运算即都取补码再运算,然后结果也是 ...

  10. Keepalived高可用服务器案例

    部署Keepalived高可用软件,实现如下: - 使用Keepalived实现web服务器的高可用 - Web服务器IP地址分别为192.168.4.100和192.168.4.200 - Web服 ...