Question

我正在构建一个WordPress网站，并找到一些音频/视频元素的示例，点击另一个元素data-value。这是我从这个特殊情况中使用的代码：change <audio> src with javascript。

请参阅下面的代码：

/* Load music to music player on single band page */
function musicPlay(e){
  e.preventDefault();

  var elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = elm.getAttribute('data-value');

  audio.load();
  audio.play();
}

以下是加载音频的代码：

<div class="media-widget">
  <audio id="audio" controls="controls">
    <source id="audioSource"></source>
      Your browser does not support the audio format.
  </audio>
  <div id="musicList">
    <div class="media-info" onclick="musicPlay(event)" data-value="cool-song.mp3">
      <div class="media-number">
        1.
      </div>
      <div class="media-title">
        Cool Song
      </div>
      <div class="media-length">
        4:31
      </div>
    </div>
    <!-- /.media-title -->
  </div>
  <!-- /#musicList -->
</div>
<!-- /.media-widget -->

我正在WordPress中构建它并使用高级自定义字段循环播放歌曲。您可以查看此处的链接进行测试：http://184.154.22.154/~pacif099/band/hillcrest-court/并查看我在点击其中一首歌时所说的内容。直接点击歌曲并且它不会加载，但是如果您点击歌曲下面的歌曲它会加载并开始播放。

更新

我也在控制台中收到此错误：

未捕获（在promise中）DOMException：play（）请求被新的加载请求中断。

Answer 1

我解决了自己的问题。由于我无法解释的原因，在media-info div中使用多个div元素会产生问题。所以更新到这个：

<ul id="musicList">
  <li>
    <div class="media-info">
      <div class="media-number">
        <p>1.</p>
      </div>
      <div>
        <a href="#" class="media-title" data-value="cool-song.mp3">
          Cool Song
        </a>
      </div>
      <div class="media-length">
        <p>4:31</p>
      </div>
    </div>
    <!-- /.media-info -->
  </li>
</ul>
<!-- /#musicList -->

我更新了JavaScript以匹配我在其他问题中使用的代码：change <audio> src with javascript。

/* Load music to music player on single band page */
musicList.onclick = function(e) {
  e.preventDefault();

  var elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = elm.getAttribute('data-value');

  audio.load();
  audio.play();
}

直接点击div不会播放音频/视频。点击下方div，它会播放

1 个答案: