javascript onclick 更改 mp3 播放器

Question

我有一些问题： 我有一个music website，它可以显示音乐排名，然后用户可以点击音乐来播放这首歌，用像 spotify 这样的mp3 播放器点击歌曲，然后底部的播放器就会去并播放它。 https://imgur.com/qCt1HTb

但我实际上可以做的是：点击右侧播放btn，它只播放该区域的mp3，而不是网站。 so how can i do?

这是我的代码：

<ul style="list-style: none">
  <li>Audio Files
    <ul id="list">
      <li><a href="#" data-value="http://music1.mp3">music1</a></li>
      <li><a href="#" data-value="http://music2.mp3">music2</a></li>
      <li><a href="#" data-value="http://music3.mp3">music3</a></li>
      <li><a href="#" data-value="http://music4.mp3">music4</a></li>
    </ul>
  </li>
</ul>

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
</audio>

Answer 1

您需要使用 javascript。我在下面用你的代码创建了一个 sn-p。

运行 sn-p 以查看每个链接使用 data-value 属性播放其音乐源。

//Element is your target element where the function is being called
function play(element) {

//get player by id
  var player = document.getElementById('audio');
  //get source by id
  var source = document.getElementById('audioSource');

//set source to current data-value attribute of of element where function is being called
  source.src = element.getAttribute('data-value');

//load
  player.load();
//play  
  player.play(); 
};

<ul style="list-style: none">
  <li>Audio Files
    <ul id="list">
      <li><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3">music1</a></li>
      <li><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3">music2</a></li>
      <li><a href="#" onclick="play(this)" data-value="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3">music1</a></li>
    </ul>
  </li>
</ul>

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
</audio>