JavaScript/JQuery 音频播放器 "Next"

Question

这里我有一个音频播放器，我可以双击歌曲来播放它们，但现在我想让next button 工作
我想要播放按钮播放下一首歌曲，但我不知道该怎么做，这是我目前得到的结果

html:

<div class="audio-player-pad">
    <div class="container Test">
        <div id="audio-image">
            <img class="cover"/>
        </div>
    <div id="audio-player">
        <div id="audio-info">
            <span class="title"></span> - <span class="artist"></span> 
        </div>
         <input id="volume" type="range" min="0" max="10" value="5" />
         <br>
         <div id="buttons">
            <span>
                <button class="img" id="prev"></button>
                <button id="play"></button>
                <button id="pause"></button>
                <button id="stop"></button>
                <button id="next"></button>
            <div id="tracker">
                <div id="progressBar">
                    <span id="progress"></span>
                </div>
                <span id="duration"></span>
            </div>
            </span>
         </div>
             <table id="playlist">
                <tr class="bold clickN">
                    <td>ID:</td>
                    <td id="first" cover="emptycover.png" artist="Artist">Track-Name:</td>
                    <td>Artist:</td>
                    <td>Duration:</td>
                </tr>
                <tr>
                    <td class="idD" song="Weown.mp3" cover="ownCover.png" artist="The Wanted" >1</td>
                    <li><td >We Own The Night</td></li>
                    <td>The Wanted</td>
                    <td class="idD">3:25</td>
                </tr>
                <tr>
                    <td class="idD">2</td>
                    <li><td song="Live_For_The_Night_-_Krewella.mp3" cover="LiveCover.gif" artist="Krewella">Live For The Night</td></li>
                    <td>Krewella</td>
                    <td class="idD">3:27</td>
                </tr>
                <tr>
                    <td class="idD">3</td>
                    <li><td song="Not_Alone_Original_Mix.mp3" cover="NotCover.jpg" artist="Mako">Not Alone</td></li>
                    <td>Mako</td>
                    <td class="idD">4:46</td>
                </tr>
                <tr>
                    <td class="idD">3</td>
                    <li><td song="Two.mp3" cover="TwoCover.png" artist="Styline">Two Days Of Hope</td></li>
                    <td>Styline</td>
                    <td class="idD">3:55</td>
                </tr>
                <tr>
                    <td class="idD">4</td>
                    <li><td song="Volvo_IKEA_(Official lyric video).mp3" cover="ikeaCover.png" artist="Sander  Hoogendoorn">Volvo Ikea</td></li>
                    <td>Sander  Hoogendoorn</td>
                    <td class="idD">2:09</td>
                </tr>
                <tr>
                    <td class="idD">5</td>
                    <li><td song="TBD.mp3" cover="emptycover.png" artist="TBD">TBD</td></li>
                    <td>TBD</td>
                    <td class="idD">TBD</td>
                </tr>
                <tr>
                    <td class="idD">6</td>
                    <li><td song="TBD.mp3" cover="emptycover.png" artist="TBD">TBD</td></li>
                    <td>TBD</td>
                    <td class="idD">TBD</td>
                </tr>
            </table>
    </div>
</div>
</div>

JavaScript/JQuery:

var audio;

//Hide Pause Initially
$('#pause').hide();

//Initializer - Play First Song
initAudio($('#first'));

function initAudio(element){
    var song = element.attr('song');
    var title = element.text();
    var cover = element.attr('cover');
    var artist = element.attr('artist');

    //Create a New Audio Object
    audio = new Audio('Music/' + song);

    if(!audio.currentTime){
        $('#duration').html('0.00');
    }

    $('#audio-player .title').text(title);
    $('#audio-player .artist').text(artist);

    //Insert Cover Image
    $('img.cover').attr('src','Pics/Cover/' + cover);

    $('#playlist tr').removeClass('active');
    element.parent('tr').addClass('active');
}


//Play Button
$('#play').click(function(){
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
});

//Pause Button
$('#pause').click(function(){
    audio.pause();
    $('#pause').hide();
    $('#play').show();
});

//Stop Button
$('#stop').click(function(){
    audio.pause();      
    audio.currentTime = 0;
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeOut(400);
});

//Next Button
$('#next').click(function(){
    audio.pause();
    var next = $('#playlist tr.active').next();
    initAudio(next);
    audio.play();
    showDuration();
    $('#play').hide();
    $('#pause').show();

});

//Prev Button
$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist tr.active').prev();
    if (prev.length == 0) {
        prev = $('#playlist tr:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
    $('#play').hide();
    $('#pause').show();
});

//Playlist Song dblClick
$('#playlist td:nth-child(2)').dblclick(function () {
    audio.pause();
    initAudio($(this, 'td:nth-child(2)'));
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    audio.play();
    showDuration();
});
//Playlist song click
$('#playlist td:nth-child(2)').click(function() {
    audio.pause();
    $('#pause').hide();
    $('#play').show(); 
});
//Volume Control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 10);
});

//Time Duration
function showDuration(){
    $(audio).bind('timeupdate', function(){
        //Get hours and minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime / 60) % 60);
        //Add 0 if seconds less than 10
        if (s < 10) {
            s = '0' + s;
        }
        $('#duration').html(m + '.' + s);   
        var value = 0;
        if (audio.currentTime > 0) {
            value = Math.floor((100 / audio.duration) * audio.currentTime);
        }
        $('#progress').css('width',value+'%');
    });
}

Answer 1

html5 中没有“下一个/上一个”默认功能。允许您执行的所有 API 都用于单个轨道，仅此而已。

我将创建一个小示例来说明如何处理这种情况。请考虑到我现在有点忙，可能会有一些错别字。但我只想向您展示构建一致的音乐播放器的一般逻辑。

所以，尝试使用这种模块化/oo 风格并进行改进，我相信你可以。

您可以使用 javascript 来管理您的轨道，如下所示:

var getTrack = function( val ){
  var obj = TRACKS;
  var track = obj.filter(function( obj ) {
    return obj.id == val;
  });
  return track[0];
}
var playlist = [];
var TRACKS = [{
    id: 0,
    name: 'music 1',
    src: 'path/to/file.mp3',
    icon: 'path/to/icon;jpg',
    foo: 'bar'
  },{
    id: 1,
    name: 'music 2',
    src: 'path/to/file.mp3',
    icon: 'path/to/icon;jpg',
    foo: 'bar'
  }];

playlist = [1, 2];

var player = function(){
  var currentPlaying = false;
  var playlistPos = false;
  var playlist = false;
  var trackList = false;
  this.setPlaylist = function( p ){
    playlist = p;
    playlistPos = 0;
    setTrack(trackList[0], 0);
    return this;
  }
  this.setTrackList = function( t ){
    trackList = t;
    return this;
  }
  this.setTrack = function( obj, i ){
    currentPlaying = obj;
    playlistPos = i;
    audio.src = obj.src;
    audio.load();
    //here you can manage the another
    //info data from the track object, like setting the track icon
    return this;
  }
  this.play = function( obj ){
    audio.play();
    return this;
  }
  this.stop = function(){
    audio.pause();
    audio.currentTime = 0;
    return this;
  }
  this.pause = function(){
    audio.pause();
  }

  //this is what you really want

  this.next = function(){
    if(playlist && currentPlaying){
      var next = (playlist[playlistPos++]) ? playlistPos++ : 0;
      setTrack(trackList[next], next);
    }
    return this;
  }
}
//Initialize
PLAYER = new player();
PLAYER.setTrackList(TRACK).setPlaylist(playlist).play();

在那之后，你可以简单地做一个

PLAYER.next();
//or even
$('.next').on('click', PLAYER.next);

它会成功的。