我想构建功能，当我按下按钮开始另一首歌曲时停止播放歌曲答案

【问题标题】：I want to build function that stops the playing song when I press the button to start another one我想构建功能，当我按下按钮开始另一首歌曲时停止播放歌曲
【发布时间】：2016-11-01 03:33:06
【问题描述】：

我已经做到了，因此您可以为函数提供一个变量，该变量决定要播放哪首歌曲（此代码用于重定向到多首歌曲的多个按钮）。

问题是，如果我按下一个按钮，然后再按下另一个按钮 - 两首歌曲同时播放。现在的问题是如何实现在播放所选歌曲之前暂停所有歌曲。

我想通过 jQuery 创建一个数组并将 .stop 应用于该数组，但这似乎不起作用。

代码：

function aud_play_pause(n) {
    var myAudio = document.getElementById("Audio" + n);
    var taskArray = new Array();

    $('audio[id^="Audio"]').each(function() {
       taskArray.push($(this).val());
    });

    if (myAudio.paused) {
        taskArray.pause();
        myAudio.play();
    } else {
        myAudio.pause();
    }
}

这是我的 sn-p：

（不包括 mp3 文件 - 这就是为什么它会抛出错误但它可以工作，我舞会 :D）

function aud_play_pause(n) {
  var myAudio = document.getElementById("Audio" + n);
  var taskArray = new Array();

  $('audio[id^="Audio"]').each(function() {
    taskArray.push($(this).val());
  });

  if (myAudio.paused) {
    taskArray.pause();
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 .btn {
  font-family: 'Open Sans';
  background-color: #4a4a4a;
  display: inline-block;
  border-radius: 42px;
  cursor: pointer;
  color: #ffffff;
  margin: 5px;
  font-size: 17px;
  font-weight: 3px;
  height: 3em;
  width: 22em;
  text-decoration: none;
  border: 0;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn:hover,
.btn:focus,
.btn:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  background-color: #CF4647;
  outline: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Handy Page</title>
  <link rel="icon" href="DragOn.ico">
  <link rel="stylesheet" href="stylesheet.css">
  <script type="text/javascript" src="code.js"></script>
</head>

<body bgcolor=#000000>
  <button class="btn" type="button" onclick="aud_play_pause(1)">Delax</button>
  <button class="btn" type="button" onclick="aud_play_pause(2)">Daft Punk</button>
  <button class="btn" type="button" onclick="aud_play_pause(3)">8-bit</button>
  <button class="btn" type="button" onclick="aud_play_pause(4)">Godwolf</button>
  <button class="btn" type="button" onclick="aud_play_pause(5)">Bounce</button>
  <audio class="music" id="Audio5" src="Orkestrated and Fries & Shine ft. Big Nab - Melbourne Bounce (Deorro Remix).mp3" type="audio/mp3">
    Your browser does not support the HTML5 Audio element.
  </audio>
  <audio class="music" id="Audio4" src="Godwolf - Love Is A Battlefield.mp3" type="audio/mp3">
    Your browser does not support the HTML5 Audio element.
  </audio>
  <audio class="music" id="Audio3" src="unreal superheroe.mp3" type="audio/mp3">
    Your browser does not support the HTML5 Audio element.
  </audio>
  <audio class="music" id="Audio2" src="Daft Punk - Harder Better Faster Stronger RMX.mp3" type="audio/mp3">
    Your browser does not support the HTML5 Audio element.
  </audio>
  <audio id="Audio1" source src="Delax - Drop You Like.mp3" type="audio/mp3">
    Your browser does not support the HTML5 Audio element.
  </audio>

我对编码非常陌生（从昨天开始）。

所以要么答案太明显以至于没人敢问，要么只是还没有人问过（因为我在互联网上找不到任何东西）。

提前致谢！

【问题讨论】：

标签： javascript html

【解决方案1】：

数组没有.pause() 方法，因此您会在taskArray.pause() 行出现错误。

您可以做的是循环遍历项目并直接暂停它们，而不是使用数组：

function aud_play_pause(n) {
  var myAudio = document.getElementById("Audio" + n);

  if (myAudio.paused) {
    $('audio[id^="Audio"]').not(myAudio).each(function() {
      this.pause();
    });
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

（另请注意，您在.each() 循环中使用$(this).val() 没有意义，因为<audio> 元素没有value。）

【讨论】：

【解决方案2】：

既然我看到你正在使用 jQuery，你可以这样做：

$('#Audio1')[0].play()

根据我自己的经验，jQuery 没有提供 play() 函数，因此您需要在真实的音频对象上调用 play()，这就是上面的代码所做的（索引为 '0'，因为选择器应该返回一个条目的结果）。如果你想暂停所有，转动类似：

$('audio').forEach(function (entry) {
    entry.pause();
})

另外，html 应该是以下形式：

<audio id="Audio1">
    <source src="myfile.mp3">
</audio>

顺便说一句，作为注释样式，JS 约定建议函数名称应为驼峰式。

此外，有关选择器（$(...) 之间的文本）的更多信息，请参阅：http://api.jquery.com/category/selectors/

【讨论】：