Yii2

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关于音频元素可用的方法、属性和事件

Yii2 - Gridview 播放下一首歌曲

Yii2 - Gridview play next song

html

audio

gridview

next