Yii - Gridview with audio player in each data row

Question

I have a gridview that display's audio path's stored in database model, and then grabs it's file in the path attached to a play button to simply play the audio file.

Here is the code:

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

        //'id',
        'nome',
        //'ficheiro',
        [
            'label' => '',
            'format' => 'raw',
            'value'=> function($data) { return Html::a('&#9658;',$data->ficheiro); },
        ],

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

But now i changed my mind and wanted to implement inside the gridview, instead of the the play button, some kind of widget or audio player with button and perhaps percentage of file listened.

Just like spotify or similar.

Tried to embed as value => field of the widget: yii2-jplayer-widget pointing to a audio file, but it didn't accept it, and throws error.

Here is the code to embed a player widget in the Gridview (didn't work):

'value'=> AudioJs::widget(['files'=>'1.mp3']),

It throws error: Getting unknown property: app\models\Faixas::

I thank for any ideas that help me solve this.

Answer 1

why not a html5 audio player

  'value' => function ($model) {                      
              return "<audio controls='controls'>
                        <source src='" . $model->ficheiro  .   "' type='audio/mp3' />
                       </audio>" ;
            },