Yii2 - Gridview play next song

Question

I have a Gridview in my Yii2 app that loads a HTML5 audio player for each mp3 audio file stored in a folder. Every row of the Gridview has it's own audio player. It does that because the file path of each mp3 file is stored in the database.

Here it is:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    //'filterModel' => $searchModel,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],

        //'id',
        'nome',
        //'ficheiro',
        [
            'label' => '',
            'format' => 'raw',
            'value'=> function ($data){                      
                        return "<audio controls='controls'>
                        <source src='" . $data->ficheiro . "' type='audio/mp3' />
                        </audio>";
                        },
        ],
        //'dummy1',
        //'dummy2',
        // 'dummy3',
        // 'dummy4',
        // 'dummy5',

        ['class' => 'yii\grid\ActionColumn', 'template' => ''],
    ],
]); ?>

At the end of one file playing is there a way to activate the next row audio player and start play the next file?

I've searched but only encounter the solution to play the next file in the same audio player file playlist. Not to activate the next audio player with it's own file.

Many thanks for a possible solution.

Answer 1

Maybe this snippet can help you:

$(function(){
    var audio = $('audio');
    audio.on('ended', function(){
        endedTrackIndex = audio.index(this);
        if((endedTrackIndex + 1) >= audio.size()) {
            return true;
        }

        nextTrack = audio.get(endedTrackIndex + 1);
        nextTrack.play();
    });
});

Read the audio dom reference about methods, properties and events available for audio element