停止所有其他 <audio> onclick？（还有一些 FontAwesome 的东西）

Question

长期潜伏者，第一次提问者；感谢 SO 迄今为止的所有帮助！

我想要的: 用户点击三十多个按钮中的一个并听到相应的音轨。单击另一个按钮可播放另一首曲目，并停止任何已播放的曲目。超级简单。

会发生什么：都去他妈的。

我也正在更改 play/pause FontAwesome class（这也不起作用），但我稍后会弄清楚：

<audio id="song1"><source src="sample/1.mp3" type="audio/mpeg"></audio>
<audio id="song2"><source src="sample/2.mp3" type="audio/mpeg"></audio>
<audio id="song3"><source src="sample/3.mp3" type="audio/mpeg"></audio>

<button onclick="letsBoogie(song1);"><i class="fa fa-play-circle"></i></button>
<button onclick="letsBoogie(song2);"><i class="fa fa-play-circle"></i></button>
<button onclick="letsBoogie(song3);"><i class="fa fa-play-circle"></i></button>

<script>
var setList = document.getElementsByTagName('audio');

function letsBoogie(sample);
for(var i = 0, len = setList.length; i < len;i++){
    if(setList[i] != sample.target){
        setList[i].pause();
        setList[i].currentTime = 0;
        $(this).find('i').className = "fa fa-play-circle";
    } else {
    setList[i].play();
    $(this).find('i').className = "fa fa-pause-circle-o";
    }
}
}, true);
</script>

几天来我一直为此焦头烂额。任何帮助将不胜感激。

编辑：对于偶然发现此问题的任何人，这是最终的工作代码。首先，识别所有音频：

<!-- this can be anywhere in body -->
<audio id="song1"><source src="sample/1.mp3" type="audio/mpeg"></audio>
<audio id="song2"><source src="sample/2.mp3" type="audio/mpeg"></audio>
<audio id="song3"><source src="sample/3.mp3" type="audio/mpeg"></audio>
...

然后放置您的图标（或按钮或链接或其他）：

<i class="fa fa-play-circle" onclick="letsBoogie(song1,this)"></i>
<i class="fa fa-play-circle" onclick="letsBoogie(song2,this)"></i>
<i class="fa fa-play-circle" onclick="letsBoogie(song3,this)"></i>
...

最后，把这个美女塞进你的JS：

var setList = $('audio');
function letsBoogie(tune, that) {
  if (tune.paused) {
  $.each(setList, function(index, alltunes) { // pause and reset all audio
    alltunes.pause();
    alltunes.currentTime = 0;
  });
    tune.play(); // then toggle play/pause targeted audio
  } else {
    tune.pause();
}
  tune.onplaying = function() { // change icon if playing
  $(that).attr('class', 'fa fa-pause-circle-o');
  }
  tune.onpause = function() { // change icon and reset if paused
  $(that).attr('class', 'fa fa-play-circle');
  sample.currentTime = 0;
  }
  tune.onended = function() { // change icon when finished
  $(that).attr('class', 'fa fa-play-circle');
  };
}

Answer 1

You need to .attr('class', to set the class than className as it is method of DOM api.

试试这个：

var setList = $('audio');

function letsBoogie(sample, that) {
  $.each(setList, function(index, elem) {
    elem.pause();
    elem.currentTime = 0;
  });
  $('button i').attr('class', 'fa fa-play-circle');
  sample.play();
  $(that).find('i').attr('class', 'fa fa-pause-circle');
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<audio id="song1">
  <source src="sample/1.mp3" type="audio/mpeg">
    <source src="sample/1.ogg" type="audio/ogg">
</audio>
<audio id="song2">
  <source src="sample/2.mp3" type="audio/mpeg">
    <source src="sample/2.ogg" type="audio/ogg">
</audio>
<audio id="song3">
  <source src="sample/3.mp3" type="audio/mpeg">
    <source src="sample/3.ogg" type="audio/ogg">
</audio>

<ul>
  <li>Song 1</li>
  <li>
    <button onclick="letsBoogie(song1,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>
<ul>
  <li>Song 2</li>
  <li>
    <button onclick="letsBoogie(song2,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>
<ul>
  <li>Song 3</li>
  <li>
    <button onclick="letsBoogie(song3,this);"><i class="fa fa-play-circle"></i>
    </button>
  </li>
</ul>

编辑： 我建议您不要将 id 属性值作为参数传递（不带引号 (")），因为 JavaScript 会寻找名称作为上述参数的全局变量。如果您有任何其他具有相同名称的全局变量，那么您的代码将无法按预期工作。我还建议使用 JavaScript 事件绑定而不是 inline 事件绑定。

停止所有其他 <audio> onclick？（还有一些 FontAwesome 的东西）

Stop all other <audio> onclick? (also some FontAwesome stuff)

html

javascript

audio

playback

停止所有其他 <audio> onclick？ （还有一些 FontAwesome 的东西）

Stop all other <audio> onclick? (also some FontAwesome stuff)

html

javascript

audio

playback

停止所有其他 <audio> onclick？（还有一些 FontAwesome 的东西）