2017-05-13 4 views
1
는 "Despacito" (노래) I는 임의의 노래가 포착하고자하고 (생성 요소 오디오) 소스가 변경하게되어 끝나는
<!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> 

, 거기 어쨌든? myfunction()은 잘 작동하지만 onend은 작동하지 않습니다 & hellip; 당신의 기능을 외부에서 배열을 설정변경 소스 [여러 오디오] JS & jQuery를

답변

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

PS : 나는 SRC #t=SEC 접미사를 사용하는 - 그래서 당신은 예를 들어 작품을 볼 수있는 전체 노래 기다릴 필요가 없습니다;

+1

매우 멋진 코드 정리 및 고품질 노래 선택! @Sarthak Singhal - 이것이 효과가 있다면 +1 +1 답변을 수락하십시오 – Lissy

+0

@Roko C. Buljan - Lovely Thanks! –

+0

오, 고마워요. :) 오신 것을 환영합니다. @SarthakSinghal –

0

여기 작업입니다) 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"); 
}) 
+0

Merci Beaucoup! –