js-html音乐播放
<img src="data:images/music.png" id="music" class="rotate">
<audio src="data:images/music.mp3?v=982" autoplay="autoplay" loop id="muc"></audio>
css
/*音乐*/#music {
position: fixed;
top: 3%;
right: 16px;
z-index: 9999999;
}
.rotate {
animation: circle 2s linear infinite;
}
@keyframes circle{
100% {
transform: rotate(360deg);
}
}
js
var mus = document.getElementById("music");
var audio = document.getElementById("muc");
mus.onclick = function() {
if(audio.paused) {
audio.play();
mus.classList.add("rotate");
} else {
audio.pause();
mus.classList.remove("rotate");
}
}
function audioAutoPlay(id) {
var audio = document.getElementById(id),
play = function() {
audio.play();
document.removeEventListener("touchstart", play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function() {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart", play, false);
}
audioAutoPlay('music');
针对IOS以上代码不支持打开页面自动播放
搬运工: http://www.mamicode.com/info-detail-1505268.html
2018-5-12日周六加班!!!!因为项目下午要上线,需要兼容ios音乐自动播放,且已经解决问题,在此做一个笔记也可以帮助看到这篇笔记的盆友
1.首先是要链接js:
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2.页面添加:
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.getElementById('allMusic1').play();
});
}, false);
ok以上就是我项目中兼容ios时写的代码
js-html音乐播放的更多相关文章
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
- 原生JS实现音乐播放器!
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...
- html5 js控制音乐播放
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...
- react.js 实现音乐播放、下一曲、以及删除歌曲(仅播放列表)
import React, { Component } from 'react'; export default class Music extends Component { construct ...
- js 实现音乐播放
<html><head><title>这种方式支持任何浏览器</title></head><body><div id=&q ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- 每天看一片代码系列(三):codepen上一个音乐播放器的实现
今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...
随机推荐
- Voyager下的Media Manager文件管理与Menu Builder
Media Manager 默认存储位置在storage/app/public 上传文件,新建文件夹,移动,重命名,删除等等等功能 Menu Builder 创建新的Main菜单 创建一个shop菜单 ...
- 【php】【异步】php实现异步的几种方法
请参考 4种php常用的异步执行方式 ajax 和 img 的 src 属性 系统指令调用 (在php代码里面调用系统指令) curl socket通信
- COMP9021——6.3
有关yield的用法简介以及图灵机 第一节课大体没有太大变化,前半节课为了给图灵机的讲解做铺垫引入了yield.数组.字符串和文件等都是一个可迭代的对象,但由于它们的所有数据都存储与内存中,对内存的消 ...
- python-函数基础、函数参数
目录 函数的基础 什么是函数 为何用函数 如何调用函数 定义函数的三种形式 无参函数 有参函数 空函数 函数的返回值 什么是返回值 为什么要有返回值 函数的调用 函数参数的应用 形参和实参 位置参数 ...
- Linux学习-账号管理
新增与移除使用者: useradd, 相关配置文件, passwd, usermod, userdel 我们登入系统时会输入 (1)账号与 (2)密码,所以建立一个可用的账号同样的也需要这两个数据.那 ...
- python基础学习笔记——运算符
计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 算数运 ...
- LoadRunner11使用方法以及注意点收集
一:安装loadrunner http://jingyan.baidu.com/article/f7ff0bfc1cc82c2e26bb13b7.html http://www.cnblogs.com ...
- luogu2764 最小路径覆盖问题
最小路径覆盖,看这里 #include <iostream> #include <cstring> #include <cstdio> #include <q ...
- Oracle 了解 DDL 操作与 REDO 的关系
目录 了解 DDL 操作与 REDO 的关系 DDL是否会产生REDO 通过 10046 trace 来分析create 和drop 如果drop失败,redo的变化 了解 DDL 操作与 REDO ...
- css各属性浏览器的兼容情况