<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音乐播放的更多相关文章

  1. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  2. 原生JS实现音乐播放器!

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  3. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

  4. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  5. react.js 实现音乐播放、下一曲、以及删除歌曲(仅播放列表)

    import React, { Component } from 'react'; export default class Music extends Component {   construct ...

  6. js 实现音乐播放

    <html><head><title>这种方式支持任何浏览器</title></head><body><div id=&q ...

  7. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  8. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  10. 每天看一片代码系列(三):codepen上一个音乐播放器的实现

    今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分 首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...

随机推荐

  1. Voyager下的Media Manager文件管理与Menu Builder

    Media Manager 默认存储位置在storage/app/public 上传文件,新建文件夹,移动,重命名,删除等等等功能 Menu Builder 创建新的Main菜单 创建一个shop菜单 ...

  2. 【php】【异步】php实现异步的几种方法

    请参考  4种php常用的异步执行方式 ajax 和 img 的 src 属性 系统指令调用 (在php代码里面调用系统指令) curl socket通信 ​

  3. COMP9021——6.3

    有关yield的用法简介以及图灵机 第一节课大体没有太大变化,前半节课为了给图灵机的讲解做铺垫引入了yield.数组.字符串和文件等都是一个可迭代的对象,但由于它们的所有数据都存储与内存中,对内存的消 ...

  4. python-函数基础、函数参数

    目录 函数的基础 什么是函数 为何用函数 如何调用函数 定义函数的三种形式 无参函数 有参函数 空函数 函数的返回值 什么是返回值 为什么要有返回值 函数的调用 函数参数的应用 形参和实参 位置参数 ...

  5. Linux学习-账号管理

    新增与移除使用者: useradd, 相关配置文件, passwd, usermod, userdel 我们登入系统时会输入 (1)账号与 (2)密码,所以建立一个可用的账号同样的也需要这两个数据.那 ...

  6. python基础学习笔记——运算符

    计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 算数运 ...

  7. LoadRunner11使用方法以及注意点收集

    一:安装loadrunner http://jingyan.baidu.com/article/f7ff0bfc1cc82c2e26bb13b7.html http://www.cnblogs.com ...

  8. luogu2764 最小路径覆盖问题

    最小路径覆盖,看这里 #include <iostream> #include <cstring> #include <cstdio> #include <q ...

  9. Oracle 了解 DDL 操作与 REDO 的关系

    目录 了解 DDL 操作与 REDO 的关系 DDL是否会产生REDO 通过 10046 trace 来分析create 和drop 如果drop失败,redo的变化 了解 DDL 操作与 REDO ...

  10. css各属性浏览器的兼容情况