jplayer实现动态添加曲目到播放列表

分析:jplayer播放列表结构,可知该结构采用JSONArray,所以为了实现动态获取播放列表,在Controller返回到HTML时,将列表内容按照jplayer播放列表内容,重新组装JSONObject数据,并填入JSONArray中,利用session或者request传递到HTML中,添加到jplayer播放列的js中,实现动态获取播放列表。

实现:

1、编写Mapper,返回一个ArrayList数组。

2、在Service中将ArrayList中的内容转化为Map或者JSONObject类型,代码如下:

@Override
public JSONArray findMusicOfPlayList(String userphone) throws JSONException {
        JSONObject jsonObject = new JSONObject();
        JSONArray jsonArray = new JSONArray();
        HashMap map = new HashMap<>();
        //Mapper返回一个ArrayList的对象数组
        ArrayList musicByUserPhoneOfFavorite = musicMapper.findMusicByUserPhoneOfFavorite(userphone);
        //for循环遍历ArrayList数组中的对象
        for (MusicBean musicBean:musicByUserPhoneOfFavorite) {
            //选取需要的内容,重新组装数据,并放入map中,或者直接放到JSONObject中也可以
            map.put("title", musicBean.getMusic_name());
            map.put("artist", musicBean.getMusic_singer());
            map.put("m4a", musicBean.getMusic_storagepath());
            map.put("poster", musicBean.getMusic_storagepath());
            //将map转为JSONObject类型
            jsonObject.putAll(map);
            System.out.println(jsonObject.toString());
            //将JSONObject放入到JSONArray中
            jsonArray.add(jsonObject);
            System.out.println(jsonArray);
        }
        //返回一个JSONArray类型的数据
        return jsonArray;
    }

3、Controller接受JSONArray数据,保存到Session或Request中,返回至前端页面

4、Thymeleaf输出到相应位置,代码如下:

           var myPlaylist = new jPlayerPlaylist({
                jPlayer: "#jplayer_N",
                cssSelectorAncestor: "#jp_container_N"
            },
            //
            , {
                playlistOptions: {
                    enableRemoveControls: true,
                    autoPlay: false
                },
                swfPath: "asserts/js/jPlayer",
                supplied: "webmv, ogv, m4v, oga, mp3, m4a",
                smoothPlayBar: true,
                keyEnabled: true,
                audioFullScreen: false
            });

总结:

1、使用JSONObject和JSONArray时,导入的jar包为:

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

2、jplayer的js代码需要放在HTML中,因为Thymeleaf不支持在单独的js页面中使用

3、HTML页面中的js代码需要如下标签:


                    
                    

你可能感兴趣的:(jplayer实现动态添加曲目到播放列表)