كيف أستعمل JavaScript و Jquery للمرور إلى Next لمقاطع صويتة من نوع audio؟

K@m@l · 3 نوفمبر 2015

لدي في صفحة html مجموعة مقاطع صوتية من نوع audio، حيث بالإمكان الضغط على القطعة الموسيقية مرتين لتشغيلها، لكن ما أريده هو إنشاء زر Next لتبدأ المقاطع باللعب وعند الضغط على الزر ينتقل القارئ إلى القطعة التالية، هل هذا ممكن مع Jquery و Javascript؟

محاولتي:

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

ثم ملف 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+'%');
    });
}

لكن عند ضغطي لا يقع أي حدث، وكأني لم أقم بالضغط، فهل من حل للمشكل؟

E.Nourddine · 5 نوفمبر 2015

للعلم فزر "next" في هذه الحالة يأخذ منطقا مغايراً عن ذلك المنطق الافتراضي في html5، حيث يعتمد بشكل أساسي على كود javascript، هذا المثال التوضيحي من شأنه أن يُوضّح وظيفة next button:

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();
    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.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);

كما يمكنك استعمال هذا القارئ الموجود على Github :

الرابط

كيف أستعمل JavaScript و Jquery للمرور إلى Next لمقاطع صويتة من نوع audio؟

السؤال

K@m@l

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية