Я хочу создать функцию, которая останавливает воспроизведение песни, когда я нажимаю кнопку, чтобы начать другую

Я сделал так, что вы можете дать функции переменную, которая решает, какая песня будет воспроизводиться (этот код используется для нескольких кнопок, которые перенаправляют на несколько песен).

Проблема в том, что если я нажимаю одну кнопку, а затем другую — две песни играют одновременно. Теперь вопрос в том, как реализовать, чтобы все песни были приостановлены перед воспроизведением выбранного.

Я думал о создании массива с помощью jQuery и применении .остановите массив, но это, кажется, не работает.

Код:

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-файлы не включены — поэтому он выдает ошибку, она работает, хотя, I prom :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>

Я очень новичок в кодировании (со вчерашнего дня).

Так что либо ответ настолько очевиден, что никто не осмелится спросить его, или просто никто не спросил его еще (потому что я не мог найти ничего в интернете).

Заранее спасибо !

2 ответа

  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>что элементы не имеют a 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 convention предлагает имена функций должны быть в случае camel.

    Кроме того, для получения дополнительной информации о селекторах (текст между $(...)) см.: http://api.jquery.com/category/selectors/