Список воспроизведения с HTML и JS

Я создаю пользовательский аудиоплеер с JavaScript, и у меня возникли проблемы с выяснением части списка воспроизведения. Я могу воспроизвести одну песню на проигрывателе, и у меня есть все, что встроено в HTML, чтобы перейти к предыдущей или следующей песне и списку ссылок, созданных для выбора конкретной песни. Я нашел пару небрежных демонстраций, но когда я применяю код к своему собственному, игрок ломается. В конце концов, я хочу, чтобы игрок был совместим с мобильным устройством (если это имеет значение), которое будет прочитайте список воспроизведения, сохраненный в массиве. Игрок позволит пользователю воспроизводить, приостанавливать и переходить к следующей или предыдущей песне. Пользователю также должно быть разрешено выбрать песню из списка, и игрок загрузит ее и сыграет.

Я не хочу использовать jPlayer. Это строго обычай с нуля. Что мне делать дальше? Вот мой код.

в основном у меня нет функций для ключевых элементов списка воспроизведения: следующая и предыдущая песня в массиве и выбор песню из списка отображаемых заголовков.

ОБНОВЛЕННЫЙ КОД (Ж/ МНОГИЕ ПРОКОММЕНТИРОВАННЫЕ НЕУДАЧНЫЕ ПОПЫТКИ)

JS:

var playIt = function() {
var musicPlayer= new Audio();
musicPlayer.src = "mulan.mp3";
musicPlayer.autoplay= false;

var currentSong = 0;
//array for song list
var playlist = new Array();
playlist[0] = {src:'mulan.mp3', name:'mulan'};
playlist[1] = ('foxAndHound.mp3');
playlist[2] = ('aladdin.mp3');

/*var playlist = [
{name:"mulan", url:"mulan.mp3"}, 
{name:"friend", url:"foxAndHound.mp3"}, 
{name:"aladdin", url:"aladdin.mp3"}];
*/
//plays the first song
var play = document.getElementById('play');
play.addEventListener('click', function() {
    musicPlayer.play();
    alert("song playing: " + currentSong[name]);
}, false);

//pause the current song
var pause = document.getElementById('pause');
pause.addEventListener('click', function() {
    musicPlayer.pause();
}, false);

//change the volume
var volume = document.getElementById('volume');
volume.addEventListener('change', function() {
    musicPlayer.volume= parseFloat(this.value / 10);
}, false);

var mute = document.getElementById('mute');
if(musicPlayer.volume > 0){
        mute.addEventListener('click', function(){
        musicPlayer.volume= 0;
        alert('muted');
    });
}

//gets song time
musicPlayer.addEventListener("timeupdate", function() {
    var duration = document.getElementById('duration');
    var s = parseInt(musicPlayer.currentTime % 60);
    var m = parseInt((musicPlayer.currentTime / 60) % 60);
    if(s < 10){
        s = '0' + s;
    }
    duration.innerHTML = m + ':' + s;
}, false);

//play the next song on the list when button clicked
var next = document.getElementById('next');
/*next.addEventListener('click', nextSong());
musicPlayer.play();
alert("song changed");*/
//next.addEventListener('click', musicPlayer.nextSong());
next.addEventListener('click', function(){
    if(currentSong < playlist.length){
        playlist.length - 1;
        musicPlayer.currentSong++;
        musicPlayer.setAttribute('src', currentSong.url);
        musicPlayer.play();
        alert('song changed');
    }else if(currentSong = playlist.length){
        currentSong = 0;
    }
}, false);


var previous = document.getElementById('prev');
previous.addEventListener('click', musicPlayer.prevSong(), false);

function nextSongPlay(){
    musicPlayer.src = playlist[currentSong];
    musicPlayer.load();
    musicPlayer.play();
    currentSong++;
    alert('new song');
}

/*function nextSong(){
    if(currentSong < playlist.length){
        currentSong++;
        musicPlayer.setAttrubute(playlist[currentSong]);
        musicPlayer.load();
        alert('song changed');
    }else{
        currentSong=0;
        alert('default song');
    }
    musicPlayer.play();
}
*/
/*
    function nextSong(){
    if(currentSong < playlist.length){
        currentSong++;
        musicPlayer.setAttrubute(playlist[currentSong]);

    }else{
        currentSong=0;
    }
    musicPlayer.load();
    musicPlayer.play();
}
*/

/*  function nextSong(){
    if(currentSong < playlist.length){
        currentSong++;
        musicPlayer.setAttrubute('src', currentSong,url);

    }else{
        currentSong=0;
    }
    musicPlayer.load();
    musicPlayer.play();
}
*/

/*function prevSong(){
    if(currentSong <= playlist.length){
        currentSong--;
        musicPlayer.setAttribute('src', playlist[currentSong]);
        musicPlayer.load();
    }else{
        currentSong=0;
    }
    musicPlayer.play();
}       */

}

HTML-код: 

<a href="#"><img src="images/play.png" id="play" alt=""/></a>
<a href="#"><img src="images/pause.png" id="pause" alt=""/></a>
<a href="#"><img src="images/prev.png" id="prev" alt=""/></a>
<span id="duration"></span>
<a href="#"><img src="images/ff.png" id="next" alt=""/></a>
<div id="volumeBox">
    Volume: <a href="#"><img src="images/mute.png" id="mute" alt=""/></a><input id="volume" type="range" min="0" max="10" value="5" />
</div>
</div>
</section>
<section id="list">
<ul>
        <li><a href="#">Song 1</a></li>
        <li><a href="#">Song 2</a></li>
        <li><a href="#">Song 3</a></li>
    </ul>
</section>
</body>
6
audio-player html javascript jquery music

1 ответов

не будет ли ваша следующая функция чем-то вроде следующей? Prev должен быть похожим.

function next() {
   if(currentSong<playList.length)
      currentSong++;
   else
      currentSong=0;
   musicplayer.play();
}

что касается выбора конкретной песни из списка отображаемых заголовков, вы можете сделать это, определив индекс элемента li, который был нажат. Метод индекса jQuery (показано) обрабатывает это хорошо, но вы можете сделать это и в обычном старом JS. Для этого Вам, очевидно, понадобится метод, чтобы выбрать индекс списка воспроизведения численно.

$('ul li a').live('click', function() {
  var indexToPlay = $(this).parent('li').index();
  musicplayer.selectIndex(indexToPlay);
  musicplayer.play();
});

это что у тебя на уме?

редактировать чтобы ответить на комментарий...

ваш щелчок кнопки может быть сделано аналогично тому, как вы выполнили кнопку воспроизведения.

var next = document.getElementById('next');
next.addEventListener('click', musicplayer.next(), false);
0