<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. python计算机基础(三)

    简述Python垃圾回收机制: 当x=10,赋值x=11,的代码,也就是10没有对应的变量名, 10在python眼中相当于垃圾,就会被清理掉,释放内存. 对于下述代码: x = 10 y = 10 ...

  2. 思维水题:UVa512-Spreadsheet Tracking

    Spreadsheet Tracking Data in spreadsheets are stored in cells, which are organized in rows (r) and c ...

  3. zookeeper安装、配置、使用

    [安装] wget http://www.apache.org/dist/zookeeper/zookeeper-3.3.6/zookeeper-3.3.6.tar.gz tar zxvf zooke ...

  4. ghost模板总结

    ghost模板的二次开发相对容易,附文档: http://themes.ghost.org/v0.6.0/docs/meta_title 这里有各行变量的说明. {{#is "home&qu ...

  5. 2019 study list

    分析工具: (1)SQL   select from   where   group by having   order by   limit   运算符(算数运算符+-*/.比较运算符>< ...

  6. UVa 1407 树形背包 Caves

    这道题可以和POJ 2486 树形背包DP Apple Tree比较着来做. 参考题解 #include <iostream> #include <cstdio> #inclu ...

  7. Django基于Pycharm开发之一【创建django工程】

    Django的工程结构,可以通过pycharm里面,选择创建django工程来直接创建,也可以通过命令行通过pip来安装. 一.通过命令行安装的步骤 Install Python. Install a ...

  8. 一个通用的Makefile框架

    先做一个简单的记录,后续有时间再慢慢完善补充细节. 先上一个整体图片: 其中,最重要的文件就是:program_template.mk. 下面是program_template.mk最重要的内容: $ ...

  9. 了解JavaScript核心精髓(一)

    ES5 1.声明脚本 <script type="text/javascript"></script> 2.DOM与BOM DOM(Document Obj ...

  10. day03_11 if语句实现猜年龄01

    老男孩猜年龄游戏 age_of_princal = 56 guess_age = int( input(">>:") ) #以下为伪代码 ''' if guess_ag ...