0
노래를 클릭하면 노래에 대한 설명을 표시 할 수 있기를 기대합니다. 노래가 재생되는 동안 계속 재생됩니다. 즉 첫 번째 노래를 클릭하면 노래가 재생되는 동안 내가 보여주고 싶은 노래에 대한 작은 설명이 표시됩니다. 노래가 끝나면 디스플레이가있는 상자가 사라집니다.재생 중에 오디오에 노래 설명 추가 시도
오디오 파일에 대한html로는 : 내가 사용
<audio src="http://mediaplayer.yahoo.com/js" controls id="audioPlayer">
Sorry, your browser doesn't support html5!
</audio>
<ul id="playlist">
<li class="current-song"><a href="sounds/Sad%20Mans%20Tongue.mp3"><span class="blacktextbg">Sad Man's Tongue</span></a></li>
<li><a href="sounds/breed.mp3"><span class="blacktextbg">Breed</span></a></li>
<!--<li><a href="sounds/creep.mp3">Creep</a></li>-->
<li><a href="sounds/Everything%20Zen.mp3"><span class="blacktextbg">Everything Zen</span></a></li>
<li><a href="sounds/Ain't%20It%20Funky%20Now%20Pt%202.mp3"><span class="blacktextbg">Ain't It Funky Now Pt 2</span></a></li>
<!--<li><a href="sounds/once.mp3">Once</a></li>-->
<li><a href="sounds/killing all the joy.mp3"><span class="blacktextbg">Killing All The Joy</span></a></li>
<!--<li><a href="sounds/torn.mp3">Torn</a></li>
<li><a href="sounds/aftermidnight.mp3">After Midnight</a></li>-->
<li><a href="sounds/X1BetaOWS.mp3"><span class="blacktextbg">OWS</span></a></li>
<li><a href="sounds/X1 Alpha.mp3"><span class="blacktextbg">X1 Alpha</span></a></li>
<!--<li><a href="sounds/undome.mp3">Undo Me</a></li>-->
<li><a href="sounds/Low%20.mp3"><span class="blacktextbg">Low</span></a></li>
<!--<li><a href="sounds/Cumbersome.mp3">Cumbersome</a></li>
<li><a href="sounds/Thru%20Your%20Window%20.mp3">Thru Your Window</a></li>-->
<li><a href="sounds/Reconsider%20Baby.mp3"><span class="blacktextbg">Reconsider Baby</span></a></li>
<li><a href="sounds/4lee.mp3"><span class="blacktextbg">4LEE</span></a></li>
<li><a href="sounds/show%20biz%20kids.mp3"><span class="blacktextbg">Show Biz Kids</span></a></li>
<!--<li><a href="sounds/show%20biz%20guitar.mp3">Show Biz Guitar</a></li>
<li><a href="sounds/Voodoo%20Child.mp3">Voodoo Child</a></li>
<li><a href="sounds/saveme.mp3">Save Me</a></li>-->
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script src="audioPlayer.js"></script>
<script>
audioPlayer();
</script>
audioplayer.js입니다 :
function audioPlayer(){
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#playlist li a").click(function(e){
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
if(currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play;
});
}// JavaScript Document
나는 뭔가에 포함해야하는 것입니다 해결하는 방법을 생각 current-song 클래스가 추가 될 때 audioplayer.js 파일을 사용합니다. 그러나 어떻게해야하는지 잘 모르겠습니다. 고맙습니다!
감사합니다. 나는이 라인을 따라 뭔가를 알고 있지만 그것을 실행하는 방법을 모르겠습니다. 나는 나머지를 알아내는 것에 지금 일할 것이다 :) –
그리고 그것을 얻었다! 며칠을 쉬었어야했지만 쓴 글을 단순히 사용할 수 있었고 설명 태그가있는 배열을 만들었고 모든 것이 아름답게 돌아갔습니다! 고맙습니다! –