MP3ファイルがインラインプレイヤーで再生されない

Question

私は、サーバーサイドスクリプトを通してMP3ファイルのデータテーブルをロードするページを持っています。サウンドマネージャプラグインを使用してファイルを再生していますが、インラインでは再生されず、新しいウィンドウでのみ開きます。これは、テーブルが完全にロードされる前にインラインプレイヤーが初期化しているため、mp3ファイルが見つからないためです。これらのファイルをインラインで（ページ上で）再生するには、どのように「聴く」ボタンを得ることができますか？

Javascriptを：

<script src="{{asset('soundmanager/js/soundmanager2-jsmin.js')}}"></script> 
<script src="{{asset('soundmanager/js/inlineplayer.js')}}"></script> 


<script type="text/javascript"> 
$(document).ready(function() { 

    $('#uploads-table').dataTable({ 
     "bProcessing": true, 
     "bServerSide": true, 
     "bPaginate": true, 
     "destroy": true, 
     "sAjaxSource": "/api/admin/tables/uploads", 
     "order": [[5,'desc']], 
     "columnDefs": [ { //this prevents errors if the data is null 
      "targets": "_all", 
      "defaultContent": "" 
     } ], 
     "columns": [ 
     // title will auto-generate th columns 
      { "data": "name", "title": "Name", "orderable": true, "searchable": true }, 
      { "data": "description", "title": "Description", "orderable": true, "searchable": true }, 
      { "data": "file_extension", "title": "File Extension", "orderable": true, "searchable": true }, 
      { "data": "mimetype", "title": "Mimetype", "orderable": true, "searchable": true }, 
      { "data": "created_by", "title": "Created By", "orderable": true, "searchable": true }, 
      { "data": "created_at", "title": "Created At", "orderable": true, "searchable": true }, 
      { "data": "updated_at", "title": "Updated At", "orderable": true, "searchable": true }, 
      { "data": "actions", "title": "Actions", "orderable": false, "searchable": false} 
     ] 
    }); 

}); 
</script> 

サーバーサイドスクリプト：すべてのテーブルのドローにSoundManager2 playerを初期化する

$upload = Upload::select(array('id','name', 'description', 'file_extension', 'mimetype', 'created_by', 'created_at', 'updated_at', 'filename', 'is_remote')); 

    return Datatables::of($upload) 
     ->edit_column('name', '<a href="/admin/content/uploads/{{$id}}/view">{{$name}}</a>') 
     ->edit_column('created_by', function($upload) { 
      return ($upload->user ? '<a href="/admin/users/'.$upload->user->id.'/view">'.$upload->user->username.'</a>' : 'Unknown'); 
     }) 
     ->edit_column('actions', function($upload) { 

      if($upload->is_remote) { 
       $filePath = URL::to($upload->filename); 
      } 
      else { 
       $filePath = URL::to($upload->getFilePath()); 
      } 

      return ('<a href="'.$filePath.'" type="'.$upload->mimetype.'" class="sm2_link" target="_blank">Listen</a> 
       <a href="/admin/content/uploads/'.$upload->id.'/view" class="btn btn-xs btn-default">View</a> 
       <a href="/admin/content/uploads/'.$upload->id.'/edit" class="btn btn-xs btn-default">Edit</a> 
       <a data-itemname="'.$upload->name.'" data-action="/admin/content/uploads/'.$upload->id.'/delete" data-title="Delete Upload?" data-toggle="modal" href="#deleteModal" class="confirmDelete btn btn-xs btn-default">Delete</a>'); 
     }) 
     ->remove_column('id') 
     ->make(true); 

Answer 1

使用drawCallbackオプション。

$('#uploads-table').dataTable({ 
    drawCallback: function(settings){ 
     // Workaround: remove click event handler from 
     // MP3 links other than the once in the table. 
     inlinePlayer.removeEventHandler(document, 'click', inlinePlayer.handleClick); 

     inlinePlayer.init() 
    }, 
    // other options 
}); 

プレーヤーを初期化することは、MP3リンクを再スキャンする唯一の方法です。ページに他のMP3リンクがある場合、それらは2回初期化されます。そのため、プレーヤを再初期化する前に、クリックイベントハンドラを削除する行を追加しました。