在音频端更改源 [多个音频] JS & jQuery

Question

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Music</title>
<script src="scripts/jquery.js"></script>
<script>
    function myFunction(){
    var a = document.createElement("audio");
    a.controls = true;
    a.setAttribute("id", "au");
    a.setAttribute("onended", "myFunc()");
    document.body.appendChild(a);
    var b = document.createElement("source");
    b.src = "assets/Playlists/Luis Fonsi Daddy Yankee - Despacito (Audio).mp3"
    a.appendChild(b);
    a.play()
    }
</script>
<script>
    function myFunc(){
        var myArray = ["assets/Playlists/Andra -Why.mp3","assets/Playlists/Ed Sheeran - Shape of You [Official Video].mp3","assets/Playlists/Ariana Grande - Side To Side ft. Nicki Minaj.mp3"];
        var randum = myArray[Math.floor(Math.random() * myArray.length)];
        $("audio").src = randum;

        //Its where I am stuck


    }
</script>
</head>
<body onLoad="myFunction()">
</body>
</html>

当"Despacito"（歌曲）结束时，我想随机选择一首歌曲，并且相应地更改（创建的元素音频）源，有什么办法吗？ myfunction() 工作正常，但 onend 不工作…

Answer 1

在函数之外设置数组，
以更具描述性的方式命名您的变量和函数
您不一定需要 source child
建议：操纵 in-memory 元素属性和东西 before 将它们附加到 DOM，而不是之后.

var songs = [
  "https://upload.wikimedia.org/wikipedia/en/6/6d/Run_On_%28Elvis_Presley_song_-_sample%29.ogg#t=20",
  "https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=17",
  "https://upload.wikimedia.org/wikipedia/en/e/e0/Dreaming_%28Scribe_song_-_sample%29.ogg#t=20"
];

function createPlayer() {
  var a = document.createElement("audio");
  a.controls = true;
  a.setAttribute("id", "au");
  a.addEventListener("ended", playRandomSong);
  // set the src directly to Audio Element
  a.src = "https://upload.wikimedia.org/wikipedia/en/6/6d/Run_On_%28Elvis_Presley_song_-_sample%29.ogg#t=20";

  document.body.appendChild(a);
  a.play();
}

function playRandomSong() {
  // this refers to the Audio Element
  this.src = songs[Math.floor(Math.random() * songs.length)];
  this.play();
}

createPlayer(); // START!!

P.S：我使用了 src #t=SEC 后缀 - 所以您不必等待整首歌曲来查看示例作品；）

Answer 2

这是一个有效的 JSFiddle

 // Plays random song from array
    function playNextRandom(){
        var allSongs = ["http://www.noiseaddicts.com/samples_1w72b820/281.mp3","http://www.noiseaddicts.com/samples_1w72b820/4939.mp3"];
        var randomIndex = allSongs[Math.floor(Math.random() * allSongs.length)];
        $("audio").src = randomIndex;
    }

// Executed when document has loaded    
$(document).ready(function(){

        // Append audio element
      var audioElement = document.createElement("audio");
    audioElement.controls = true;
    audioElement.setAttribute("id", "au");
    document.body.appendChild(audioElement);

    // Append Audio source
    var audioSource = document.createElement("source");
    audioSource.src = "http://www.noiseaddicts.com/samples_1w72b820/4927.mp3"
    audioElement.appendChild(audioSource);
    audioElement.play()
    audioSource.setAttribute("onended", "playNextRandom");
})

在音频端更改源 [多个音频] JS & jQuery

Change source on audio end [multiple audios] JS & jQuery

html

javascript

jquery

html5-audio