Question

我已经制作了这样你可以给函数一个变量来决定要播放哪首歌（这段代码用于重定向到多首歌曲的多个按钮）。

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

我想过通过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();
    }
}

这是我的片段：

（不包括mp3文件 - 这就是为什么它会抛出错误但是它有效，我承诺：D）

＆＃13;

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();
  }
}

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

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

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

提前致谢！

Answer 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();
  }
}

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

Answer 2

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

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

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

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

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

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

作为笔记样式的BTW，JS约定建议函数名称应该是驼峰式的。

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

当我按下按钮启动另一个按钮时，我想构建停止播放歌曲的功能

2 个答案: