<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. 【js】input 焦点到内容的最后

     //引用部分应支持jQuery  function find_focus(obj){    var curr = jQuery(obj);    var val = curr.val();    c ...

  2. 让Python带你看一场唯美的横飘雪!

    “北国风光,千里冰封,万里雪飘”,这句诗描写了一句美丽肃静的风光图,恰逢昨天笔者这边也下了一场比较大的雪,要不今天就用Python带大家也来领略一次美丽的雪景? 开发环境 版本:Python3.6 系 ...

  3. OpenCV中的图像形态学转换

    两个基本的形态学操作是腐蚀和膨胀.他们的变化构成了开运算,闭运算,梯度等.下面以这张图为例 1.腐蚀 这个操作会把前景物体的边界腐蚀掉. import cv2 import numpy as np i ...

  4. LeetCode(155) Min Stack

    题目 Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. ...

  5. Linux交换分区swap

    一.SWAP 说明 1.1 SWAP 概述 当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被 ...

  6. 【HIHOCODER 1055】 刷油漆(树上背包)

    描述 小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了不同的数字,并且这些数字都是处于1..N的范围之内,每根木棍都连接着两个不同的小球,并且保 ...

  7. Linux学习-进程管理

    为什么进程管理这么重要呢? 这是因为: 首先,我们在操作系统时的各项工作其实都是经过某个 PID 来达成的 (包括你的 bash 环境), 因此,能不能进行某项工作,就与该进程的权限有关了. 再来,如 ...

  8. 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 ...

  9. Selenium WebDriver-通过页面标题切换窗口

    selenium webdriver可以通过获取页面标题,再跟据标题去切换浏览器窗口,代码如下: #encoding=utf-8 import unittest import time import ...

  10. Redhat7配置yum源(本地源和网络源)

    Redhat7配置yum源(本地源和网络源)   目录 一:配置本地yum源 二:配置网络yum源 YUM(Yellow dog Updater Modified): yum是基于RPM包构建的软件更 ...