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部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...
随机推荐
- 【js】input 焦点到内容的最后
//引用部分应支持jQuery function find_focus(obj){ var curr = jQuery(obj); var val = curr.val(); c ...
- 让Python带你看一场唯美的横飘雪!
“北国风光,千里冰封,万里雪飘”,这句诗描写了一句美丽肃静的风光图,恰逢昨天笔者这边也下了一场比较大的雪,要不今天就用Python带大家也来领略一次美丽的雪景? 开发环境 版本:Python3.6 系 ...
- OpenCV中的图像形态学转换
两个基本的形态学操作是腐蚀和膨胀.他们的变化构成了开运算,闭运算,梯度等.下面以这张图为例 1.腐蚀 这个操作会把前景物体的边界腐蚀掉. import cv2 import numpy as np i ...
- LeetCode(155) Min Stack
题目 Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. ...
- Linux交换分区swap
一.SWAP 说明 1.1 SWAP 概述 当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被 ...
- 【HIHOCODER 1055】 刷油漆(树上背包)
描述 小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了不同的数字,并且这些数字都是处于1..N的范围之内,每根木棍都连接着两个不同的小球,并且保 ...
- Linux学习-进程管理
为什么进程管理这么重要呢? 这是因为: 首先,我们在操作系统时的各项工作其实都是经过某个 PID 来达成的 (包括你的 bash 环境), 因此,能不能进行某项工作,就与该进程的权限有关了. 再来,如 ...
- Android CTS - Cannot run program "aapt"/ Fail to run aapt on .../apk installed but AaptParser failed
今天同事碰到cts的一些问题,跑到某个apk的时候,就提示如下错误: Cannot run program "aapt": error=2. No such file or dir ...
- Selenium WebDriver-通过页面标题切换窗口
selenium webdriver可以通过获取页面标题,再跟据标题去切换浏览器窗口,代码如下: #encoding=utf-8 import unittest import time import ...
- Redhat7配置yum源(本地源和网络源)
Redhat7配置yum源(本地源和网络源) 目录 一:配置本地yum源 二:配置网络yum源 YUM(Yellow dog Updater Modified): yum是基于RPM包构建的软件更 ...