无法使用js在mp3上启动自动播放

Question

我在使用mp3文件进行自动播放时遇到了一些麻烦。我的div与mp3文件被称为“lyd”。

尝试在js中制作它，但它没有用。

let lyd = document.getElementById("lyd");
lyd.play();

它不输出声音。

HTML

<audio type="audio/mpeg" id="lyd" src="../music/Space.mp3"></audio> 

我的控制台中的错误是：

未捕获（在承诺中）DOMException

Answer 1

有些浏览器阻止音乐自动播放。对于Chrome，他们改变了autoplay policy。因此，您应该始终查看play函数返回的Promise，看看它是否被拒绝：

var lyd = document.getElementById( 'lyd' );
var promise = lyd.play();

if ( promise !== undefined ) {
  promise.then(_ => {
    // Autoplay started!
  } ).catch( error => {
      // Autoplay was prevented.
      // Show a "Play" button so that user can start playback.
      var btn = document.getElementById( 'btnPlay' );

      btn.style.visibility = 'visible'
      btn.onclick = function() {
      lyd.play()
    }
  } );
}

#btnPlay {
  visibility: hidden
}

<audio type="audio/mpeg" id="lyd" src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-two/musical_compressed_house_or_trance_drum_loop.mp3"></audio>

<input id="btnPlay" name="" type="button" value="Play Sound">

它仍然会向控制台抛出错误，但至少音频正在播放。