使用jPlayer制作一个简单的网页播放器

因工作需要，要做一个网页播放器，使用了jplayer，用jplayer的好处是基本不用考虑兼容了，demo样式也很全面。
这个播放器功能包含：
①不能播放的音频自动跳过
②记录播放次数
③记录历史位置，下次打开播放列表准确定位历史播放位置
jplayer下载页面：http://www.jplayer.org/
官网有很全面的demo了，我就是直接用的官方demo改的播放列表。demo里面能看到的不详解，主要是记录一下demo里面看不到的，免得下次又踩坑。

Snipaste_2020-09-08_14-00-37.png

jplayer播放器的回调有基础的几种：
error:出错后回调
play：点击播放后回调
pause：暂停后回调
volumechange：声音改变后回调
ended：播放结束后回调
不能播放的音频自动跳过，在播放器出错的回调函数中直接跳到下一首就行。
记录播放次数，可以在点击播放后的回调函数里进行相应操作。

$(document).ready(function(){
            var musicPlayList = new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer",
                cssSelectorAncestor: "#jp_container"
            }, {$jsons}, {
                play: function(event) {
                    //console.log(event.jPlayer.status.media.id);
                    $.ajax({
                        dataType: 'json',
                        type: 'POST',
                        url: "计算播放次数的接口",
                        data: {
                            id: event.jPlayer.status.media.id,
                            type: event.jPlayer.status.media.type,
                            model:"music_type"
                        },
                        success: function (data) {}
                    });
                },
                error:function(event){
                    $(".jp-next").trigger("click");
                },
                swfPath: "jplayer",
                supplied: "mp3,oga",
                wmode: "window",
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true
            });
            musicPlayList.play(历史播放位置);
        });

顺带一提，如果是单纯做个音乐播放器的话，supplied里面不能填mp4，填了会出来一个video的黑框的。
jPlayer支持MP3、MP4、OGA等多种格式，和很多插件一样，数据使用json格式。从数据库获取歌单列表后，在后端将数据拼接成json（前端拼其实更好，但容易长度过长出现问题，还是后端拼算了），在拼接这一步操作里面，trans_ext()函数的作用是获取url的后缀名，根据后缀名判断文件格式，然后使用相应的格式来播放音频。官方要求的json里面并不包含id（歌曲ID）和music_type（歌曲类型），但是把其他字段拼到json里面他也能运行，所以我把它们也拼进去，方便完成后续的功能。

//操作缓存，获取历史歌曲所在位置
        $__play_location = cache('musicpush.play_location'); //上次播放的位置
        $history_temp = $history_location = 0;
        //拼接json
        $jsons = '[';
        foreach($list as $k => $val){
            //过滤掉不合法的格式
            $trans_ext = $this->model->trans_ext($val['music_url']);
            if($trans_ext !== false){
                $jsons .= '{title:"'.$val['title'].'",'.$trans_ext.':"'.$val['music_url'].'",id:"'.$val['id'].'",type:"'.$val['music_type'].'"},';
                if($val['id'] != $play_location){
                    $history_temp++;
                }else{
                    //记录位置
                    $history_location = $history_temp;
                }
            }
        }
        $jsons .= ']';

拼接json的时候我也顺便获取了历史播放位置。
jplayer播放器还有一些别的函数可以操作，我只列出我用过的：

//向列表中添加歌曲
musicPlayList.add({title:title,mp3:url});
//播放列表中的指定歌曲
musicPlayList.play(1);  //播放第二首

上面代码中的musicPlayList.play()就是用来实现记录历史播放功能，从指定位置开始播放的。
到此，需要的功能都完成了。
我网页中还有单独听一首歌的功能，这个功能用处不大，我直接用audio标签做了。

//监听播放开始
                this.addEventListener('play',function(){
                        $.ajax({
                            dataType: 'json',
                            type: 'POST',
                            url: "播放次数+1的接口",
                            data: {
                                id: data.rows[index].id,//json特意拼进去的歌曲ID
                                type:data.rows[index].type//特意拼进去的歌曲类型
                            },
                            success: function (e) {
                                //前端样式变化 歌曲播放数量+1
                                var i = parseInt($(".listen_times_"+data.rows[index].id).text()) + 1;
                                $(".listen_times_"+data.rows[index].id).text(i);
                            }
                        });
                    });

最后编辑于：2020.09.08 14:39:07