переключаться между песнями с помощью кнопки - PullRequest
Новая
       22

переключаться между песнями с помощью кнопки

0 голосов
/ 24 февраля 2019

Я пытаюсь поменять местами 2 песни одним нажатием кнопки.Я могу успешно поменять песню один раз, просто изменив src, но когда я использую оператор if и else, элементы управления «мерцают», что означает, что в моем операторе if else должна быть ошибка.

HTML 

<div id = "audioplayer">
    <p id="songname">Listen to  Sisyphus by Have A Nice Life</p>
    <audio id = "song"
        controls
        src="Untitled/10%20Sisyphus.mp3">
        Your browser does not support the
        <code>audio</code> element.
    </audio>
</div>

<button onclick="myFunction()">Click to change songs</button>

JS: 

function myFunction() {
    if(document.getElementById("song").src === "Untitled/10%20Sisyphus.mp3") {

        document.getElementById("songname").innerHTML = "listening to track03.mp3";
        document.getElementById("song").src = "test.mp3";
    }

    else{

    document.getElementById("songname").innerHTML = "Listen to Sisyphus by Have A Nice Life";
    document.getElementById("song").src = "Untitled/10%20Sisyphus.mp3";



    }
}

1 Ответ

0 голосов
/ 24 февраля 2019

Хотя вы можете установить .src с относительным путем (например, "Untitled/10%20Sisyphus.mp"), доступ к свойству .src даст вам полный путь: 

const song = document.getElementById("song");
song.src = "test.mp3";
console.log(song.src);
<audio id="song" controls src="Untitled/10%20Sisyphus.mp3"></audio>

Итак, вам просто нужно вместо этого заменить тесты на полный путь, например: 

function myFunction() {
  if (document.getElementById("song").src === "https://example.com/Untitled/10%20Sisyphus.mp3") {
    // ...

Живой фрагмент (рабочий HTML), но без реальных звуков): 

function myFunction() {
  const song = document.getElementById("song");
  const songname = document.getElementById("songname");
  if (song.src === "https://stacksnippets.net/Untitled/10%20Sisyphus.mp3") {
    songname.innerHTML = "listening to track03.mp3";
    song.src = "test.mp3";
  } else {
    songname.innerHTML = "Listen to Sisyphus by Have A Nice Life";
    song.src = "Untitled/10%20Sisyphus.mp3";
  }
}
<div id="audioplayer">
  <p id="songname">Listen to Sisyphus by Have A Nice Life</p>
  <audio id="song" controls src="Untitled/10%20Sisyphus.mp3">
                Your browser does not support the
                <code>audio</code> element.
            </audio>
</div>

<button onclick="myFunction()">Click to change songs</button>
...