javascript - 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>

服务器端脚本:

$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初始化选项SoundManager2 player每 table 抽奖。

$('#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 链接，它们可能会被初始化两次。这就是为什么我在重新初始化播放器之前加入了删除点击事件处理程序的行。