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有关 audio 元素可用的方法，属性和事件

Yii2 - Gridview播放下一首歌

1 个答案: