网站制作需要平台,柳州网站推广最好的公司,wordpress显示访客,上海做网站站优云一一十六使用Python Django框架做一个音乐网站#xff0c; 本篇音乐播放器功能完善及原有功能修改。 目录
播放列表修改
视图修改
删除、清空播放器
设置路由
视图处理
修改加载播放器脚本
模板修改
脚本设置
清空功能实现
删除列表音乐
播放列表无数据处理
视图修改
播放… 使用Python Django框架做一个音乐网站 本篇音乐播放器功能完善及原有功能修改。 目录
播放列表修改
视图修改
删除、清空播放器
设置路由
视图处理
修改加载播放器脚本
模板修改
脚本设置
清空功能实现
删除列表音乐
播放列表无数据处理
视图修改
播放音乐与列表同步
修改设置播放效果
监听媒体播放事件
歌单、专辑、单曲列表播放
音乐播放设置
添加单曲处理
总结 播放列表修改
原来的播放列表只是查询所有歌曲改为从添加的播放列表中调用数据。 视图修改
只需要查询播放器表所有记录之后通过单曲、歌手外键查询其他需要信息。
def play_list(request): 音乐播放器列表 mp3_list Player.objects.all()arr []for item in mp3_list:arr.append({id: item.id,cover: str(item.singler.portrait),singer: item.singler.name,singer_id: item.singler_id,song_id: item.singe.id,song_name: item.singe.name,song_path: str(item.singe.path),duration: get_song_duration(int(item.singe.duration)),})return JsonResponse({list: arr}) 删除、清空播放器
设置路由
# 删除或清空播放器
path(clear_player, views.clear_player, nameclear_player), 视图处理
清空播放列表和删除播放列表中某个单曲在一个视图处理可通过type来判断。
def clear_player(request): 删除或清空播放器列表 id request.GET.get(id)type request.GET.get(type)if type 1:# 播放器删除单曲Player.objects.filter(pkid).delete()else:# 清空所有歌曲Player.objects.all().delete()res {status: 1, msg: 操作成功}return JsonResponse(res) 修改加载播放器脚本
加载播放器方法从匿名方法改为设置方法以方便其他地方调用。
修改内容如下 模板修改
脚本设置
在base.html最下面设置js脚本请求视图操作成功后重新加载音乐播放器。
// 清空播放列表
function clear_player(id, type) {$. get(/clear_player, {id:id, type:type}, function (msg) {if(msg.status 1) {layer.msg(msg.msg, {icon: 6});onPlayer();} else {layer.msg(msg.msg, {icon: 5});}});
} 清空功能实现
播放器音乐列表清空列表元素增加调用清空列表方法。
内容如下
div classlist_top flex_cdiv idplay_title/divdiv classflex_cdiv classclear_all onclickclear_player(0, 2)i classglyphicon glyphicon-trash/ispan classclear_btn清空列表/span/divi classclose glyphicon glyphicon-remove/i/div
/div 删除列表音乐
在音乐播放器列表增加调用删除单曲方法需要修改play.js中渲染音乐播放器列表处理。
内容如下
i title删除歌曲 classglyphicon glyphicon-trash onclickclear_player( music_list[i].id , 1)/inbsp;nbsp; 播放列表无数据处理
当清空播放列表后渲染出错。 视图修改
在播放列表视图中增加无数据情况的数据返回。
def play_list(request): 音乐播放器列表 mp3_list Player.objects.all()arr []if mp3_list:for item in mp3_list:arr.append({id: item.id,cover: /media/ str(item.singler.portrait),singer: item.singler.name,singer_id: item.singler_id,song_id: item.singe.id,song_name: item.singe.name,song_path: /media/ str(item.singe.path),duration: get_song_duration(int(item.singe.duration)),})else:arr.append({id: 0,cover: /static/images/s2.jpg,singer: 无歌手,singer_id: 0,song_id: 0,song_name: 无歌曲,song_path: ,duration: 0:00,})return JsonResponse({list: arr}) 播放音乐与列表同步
在歌单、专辑或者单曲列表点击播放图标进行播放音乐时列表状态同步。 修改设置播放效果
修改play.js中设置音乐播放器列表效果的代码设置id选择器。
内容如下
// 设置音乐播放器列表
function set_media_list(music_list) {var play_html ;for (var i 0; i music_list.length; i) {if (i) {play_html div classflex_c list_item idmusic_num (i 1) stylepointer-events: auto; div classlist_idx (i 1) span classplaying styledisplay: none;} else {play_html div classflex_c list_item active_cur idmusic_num (i 1) stylepointer-events: auto; div classlist_idx (i 1) span classplaying;} 监听媒体播放事件
在原有加载播放器事件中增加监听媒体播放事件处理在这里处理同步音乐播放和列表状态。
内容如下
// 监听播放器 播放时触发
$player.addEventListener(play, function () {$(#music_numcurrentIndex).removeClass(active_cur);$(#music_numcurrentIndex).find(.playing).hide();$(#music_num(currentIndex1)).addClass(active_cur);$(#music_num(currentIndex1)).find(.playing).show();
});
效果 歌单、专辑、单曲列表播放
需要修改设置音乐播放器的脚本的方法和增加对播放操作的事件处理。
要到达的效果为在歌单、专辑的单曲列表点击全部播放则添加所有单曲并播放第一个歌曲
而在单曲列表中点击单曲的播放则增加当前单曲到播放列表并播放当前单曲。 音乐播放设置
增加对musicPlay类的点击事件响应处理
获取按钮上的id和type来进行单曲、歌单、专辑分别添加处理
之后设置当前播放音乐显示和路径处理播放列表显示处理
音乐播放器播放状态并进行播放。
$(.musicPlay).click(function() {var music_dian $(#music_dian);var id $(this).attr(data-id);var type $(this).attr(data-type);var nowNum 0;if(type 2) {// 歌单var urll /songsheet_player;} else if(type 3) {// 专辑var urll /album_player;} else {// 单曲var urll /add_player;}$. get(urll, {id:id}, function (msg) {if(msg.status 1) {layer.msg(msg.msg, {icon: 6});setInit();} else {layer.msg(msg.msg, {icon: 5});}});if(type 1) {var nowNum music_list.length - 1;}// 设置当前播放音乐currentIndex nowNum;setMusic();// 同步播放列表状态var nowDiv $(#play_list).children(.active_cur);nowDiv.find(.playing).hide();nowDiv.removeClass(active_cur);var newDiv $(#music_num(nowNum1));newDiv.addClass(active_cur);newDiv.find(.playing).show();// 设置播放器 播放状态if (music_dian.attr(class) glyphicon glyphicon-play) {music_dian.attr(class, glyphicon glyphicon-pause);}$player.play();
}); 添加单曲处理
视图中添加单曲音乐时重复的单曲不再添加进入单曲中。
def add_player(request): 添加歌曲到播放器 # 查询相应单曲id request.GET.get(id)info Singe.objects.filter(pkid).first()repeat Player.objects.filter(singeid).first()if repeat:return JsonResponse({status: 1, msg: 添加“%s”成功 % info.name})if info:# 加入到播放列表中singerDb Singler.objects.filter(idinfo.singler_id).first()# 新增单曲playDb Player()playDb.name info.name# 建立关联playDb.singe infoplayDb.singler singerDbplayDb.save()res {status: 1, msg: 添加“%s”成功 % info.name}else:res {status: 0, msg: 该歌曲不存在无法添加}return JsonResponse(res) 总结
本篇内容为音乐播放器表创建后的列表渲染删除清空播放器功能
播放音乐列表同步添加播放音乐等功能实现。
