H5音乐播放方案
环境:移动端、浏览器、微信
问题:音乐不自动播放问题
原因:
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音乐播放方案的更多相关文章
- 【H5 音乐播放实例】第一节 音乐详情页制作(1)
本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
- H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...
- H5音乐播放器源码地址
源码获取 https://pan.baidu.com/s/1pR_bhIFFQWU6TK9ZvrRWIA 安卓安装包下载地址 https://pan.baidu.com/s/1Z8HF5LY ...
- H5音乐播放器源码共享
由于博客云后台管理工具写起东西来实在难受,所以直接共享源码了! https://pan.baidu.com/s/1XeRxlk7iv5qt1f16s64F9w H5源码!暂时只支持手机适配,电脑端 ...
- H5音乐播放器【歌单列表】
上篇详细描述了播放页歌词如何实现跟随跟单滚动,如何解析歌词,那么歌单页又是如何生成的呢,话不多说,直接上图上代码! 首先需要获取数据,具体获取数据api请转到我跟我大兄弟博客去观看学习去,同时也感谢我 ...
- 【前端】h5音乐播放demo 可关闭可播放
复制如下代码,直接可预览(记得把超链接换成自己本地路径) <!DOCTYPE html> <html> <head> <meta charset=" ...
- 使用余弦定理制作磁盘形状h5音乐播放器
目录 [1]功能实现 [2]效果展示 [3]原理说明 旋转原理 余弦定理 [4]代码实现 HTML CSS JS [5]源码查看 功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
随机推荐
- 管道(Pipe)----计算机进程间通信
参至他人博客:https://blog.csdn.net/u011583316/article/details/83419805
- Chrome开发者工具详解(五)之Network面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- delete释放空间时出错的原因
int *a=new int[10]; ...... delete []a; 后面“delete []a;”出现错误的情况大致有: 1 数组的首地址a被你有意无意更改了,如:a++之类的: 2 变量的 ...
- vue + nginx部署404
记录: vue项目打包放到服务器,使用nginx反向代理的时候路由页面刷新报404,因为刷新时,不存在路径对应的文件或文件夹,需要在nginx配置中添加代码: index index.html; tr ...
- Navicat连接阿里云服务器MSQL数据库
新买了台服务器Navicat老是连接不上数据库,查找一圈找到解决办法.So Easy 一.shell远程登录,进入数据库 mysql -uroot -p 二.输入以下命令进行授权: GRANT ALL ...
- pymysql基本操作
https://www.cnblogs.com/woider/p/5926744.html https://www.runoob.com/python3/python3-mysql.html 注意: ...
- 【串线篇】spring boot启动配置原理
几个重要的事件回调机制 配置在META-INF/spring.factories ApplicationContextInitializer SpringApplicationRunListener ...
- Jmeter性能测试请求超时:目前遇见有三种情况
1.请求连接超时.连不上服务器.一般是因为线程太多 2.连接成功,但是读取超时.等不到服务器返回的数据,一般是这次请求查询的量很大,比如查了5度的顶点.(timeout小于server的最大等待时间) ...
- Word快捷选取
在word中,你知道鼠标单击选中一个词,双击选中一行,三击选中一个段落吗?
- 运行biggan demo
http://www.zhuanzhi.ai/document/8705953a704e1bf8e051c161d1587d88