更改音频端的源 [多个音频] JS & jQuery答案

【问题标题】：Change source on audio end [multiple audios] JS & jQuery更改音频端的源 [多个音频] JS & jQuery
【发布时间】：2017-10-12 16:11:53
【问题描述】：

<!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 无法正常运行……

【问题讨论】：

标签： javascript jquery html html5-audio

【解决方案1】：

在函数之外设置数组，
以更具描述性的方式命名您的变量和函数
您不一定需要source 孩子
建议：操作内存中的元素属性和之前将它们附加到 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 后缀 - 所以你不必等待整首歌曲才能看到示例工作；）

【讨论】：

非常好的代码清理，以及高质量的歌曲选择！！ @Sarthak Singhal - 如果这对你有用，请接受这个 +1 答案
@Roko C. Buljan - 非常感谢！
顺便问一下，您能建议任何方法，如何限制同一首歌曲被随机挑选？
@SarthakSinghal 这会有帮助吗？ stackoverflow.com/questions/19351759/…

【解决方案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");
})

【讨论】：

感谢 Beaucoup！