Django实现音乐网站 (21)
使用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, name='clear_player'),视图处理
清空播放列表和删除播放列表中某个单曲在一个视图处理可通过type来判断。
def clear_player(request):
""" 删除或清空播放器列表 """
id = request.GET.get('id')
type = request.GET.get('type')
if type == '1':
# 播放器删除单曲
Player.objects.filter(pk=id).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});
}
});
}清空功能实现
播放器音乐列表清空列表元素增加调用清空列表方法。
内容如下：
清空列表
删除列表音乐
在音乐播放器列表增加调用删除单曲方法，需要修改play.js中渲染音乐播放器列表处理。
内容如下：
' ' +播放列表无数据处理
当清空播放列表后，渲染出错。
视图修改
在播放列表视图中增加无数据情况的数据返回。
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 += '' +
'' + (i + 1) +
'
