Yii2 - Gridview 播放下一首歌曲

Posted 2023-02-25

【中文标题】Yii2 - Gridview 播放下一首歌曲

【英文标题】：Yii2 - Gridview play next song

【发布时间】：2015-08-09 09:56:10

【问题描述】：

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

在一个文件播放结束时，有没有办法激活下一行音频播放器并开始播放下一个文件？

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

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

【参考方案1】：

也许这个 sn-p 可以帮助你：

$(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元素的方法、属性和事件

【讨论】：

已解决！ sn-p 为我指明了正确的方向。非常感谢托尼 :)