html - Yii2-Gridview播放下一首歌

Question

我的Yii2应用程序中有一个Gridview，可为文件夹中存储的每个mp3音频文件加载HTML5音频播放器。 Gridview的每一行都有自己的音频播放器。这样做是因为每个mp3文件的文件路径都存储在数据库中。

这里是:

<?= 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' => ''],
    ],
]); ?>

在播放一个文件结束时，是否可以激活下一行音频播放器并开始播放下一个文件？

我进行了搜索，但仅遇到在同一音频播放器文件播放列表中播放下一个文件的解决方案。不要用自己的文件激活下一个音频播放器。

非常感谢您提供的可能的解决方案。

Answer 1

也许这段代码可以帮助您:

$(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();
    });
});

阅读有关可用于音频元素的方法，属性和事件的 audio dom reference