audio src 属性 用法 以及 不能自动播放,Uncaught (in promise) DOMException: play() failed because the us

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_42112846

最近做项目，要求再网页上取循环得播放背景音乐，最后嵌入到安卓，查阅了之后最后咏鹅audio这个属性，下面我们用来看一下它的使用方法以及说一下它的对于 谷歌以及ios等得局限性：

首先我们来看一下它的用法：

官网 给出得demo 是：
<audio src="song.ogg" controls="controls">
   Your browser does not support the audio element.
</audio>
//src里面存放得就是你音频得源地址，它有两种路径得写法：
可能的值：
绝对 URL - 指向另一个站点（比如 href="http://www.example.com/song.ogg"）
相对 URL - 指向网站内的文件（比如 href="song.ogg"）

它还有另外得一些属性：

autoPlay: 如果出现该属性，则音频在就绪后马上播放。

controls：如果出现该属性，则向用户显示控件，比如播放按钮。

loop：如果出现该属性，则每当音频结束时重新开始播放。

preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

经常用到得就这几个属性，此外他还有一些全局属性以及事件属性（点击传送）；

下面我们来看一下它的具体用法：

//首先我们再html页面定义一个标签，指明样式，播放得模式以及源文件
<audio style="display:none; height: 0" id="bg-music" loop="loop">
    <source src="./bjmusic.mp3"/>
</audio>


//之后我们要编写一个用于自动播放该标签得js
//首先定义页面加载是需要加载得方法：
//音乐自动播放
$(document).ready(function () {
    console.log('bjmusic==============')
    autoPlayMusic();
    audioAutoPlay();
});

// 音乐播放
function autoPlayMusic() {
    console.log('autoPlayMusic==============')
// 自动播放音乐效果，解决浏览器或者APP自动播放问题
  function musicInBrowserHandler() {
     //具体控制音乐得播放
      musicPlay(true);
     document.body.removeEventListener('touchstart', musicInBrowserHandler);
  }
  document.body.addEventListener('touchstart', musicInBrowserHandler);
    // 自动播放音乐效果，解决微信自动播放问题
    function musicInWeixinHandler() {
        musicPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            musicPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
    }

    document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}

function musicPlay(isPlay) {
    console.log('musicPlay==============')
    var media = document.getElementById("bg-music");
    // document.getElementById("bg-music").onplaying;
    // console.log(media)
    media.play();
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}

function audioAutoPlay() {
    var audio = document.getElementById('bg-music');
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
}

以上就是一个简单得html+js得用法，当然你也可以去添加向暂停，播放之类得控制方法；

但是这种方式，对于谷歌ios来说，他们是禁止你去自动播放得，因为他们绝对自动播放这种操作，浪费用户得资源，不利于更好得用户体验，ios我是不知道怎么去解决但是 谷歌可以有一种来测试你是否设置成功的办法，但是仅仅用于你自己测试，因为换一个谷歌浏览器是就不行了，下面我们来看一下具体的操作测试的方法a:

第一步，在chrome浏览器中输入：chrome://flags/#autoplay-policy 会有如下页面

 

 

第二步，在Autoplay policy中将Default改为No user gesture is required

 第三步，点击下方的“RELAUNCH NOW”,就大功告成了！

掩耳盗铃的方式仅用于测试