本篇音乐播放器功能完善及原有功能修改。
目录
播放列表修改
原来的播放列表只是查询所有歌曲，改为从添加的播放列表中调用数据。
视图修改
只需要查询播放器表所有记录，之后通过单曲、歌手外键查询其他需要信息。
python
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})删除、清空播放器
设置路由
python
# 删除或清空播放器
path('clear_player', views.clear_player, name='clear_player'),视图处理
清空播放列表和删除播放列表中某个单曲在一个视图处理可通过type来判断。
python
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脚本请求视图；操作成功后，重新加载音乐播放器。
javascript
// 清空播放列表
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});
}
});
}清空功能实现
播放器音乐列表清空列表元素增加调用清空列表方法。
内容如下：
html
<div class="list_top flex_c">
<div id="play_title"></div>
<div class="flex_c">
<div class="clear_all" onclick="clear_player(0, 2)">
<i class="glyphicon glyphicon-trash"></i>
<span class="clear_btn">清空列表</span>
</div>
<i class="close glyphicon glyphicon-remove"></i></div>
</div>删除列表音乐
在音乐播放器列表增加调用删除单曲方法，需要修改play.js中渲染音乐播放器列表处理。
内容如下：
html
'<i title="删除歌曲" class="glyphicon glyphicon-trash" onclick="clear_player('+ music_list[i].id +', 1)"></i> ' +播放列表无数据处理
当清空播放列表后，渲染出错。
视图修改
在播放列表视图中增加无数据情况的数据返回。
python
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选择器。
内容如下：
javascript
// 设置音乐播放器列表
function set_media_list(music_list) {
var play_html = '';
for (var i = 0; i < music_list.length; i++) {
if (i) {
play_html += '<div class="flex_c list_item" id="music_num'+ (i + 1) +
'" style="pointer-events: auto;">' +
'<div class="list_idx">' + (i + 1) +
'<span class="playing" style="display: none">';
} else {
play_html += '<div class="flex_c list_item active_cur" id="music_num'+ (i + 1) +
'" style="pointer-events: auto;">' +
'<div class="list_idx">' + (i + 1) + '' +
'<span class="playing">';
}监听媒体播放事件
在原有加载播放器事件中增加监听媒体播放事件处理，在这里处理同步音乐播放和列表状态。
内容如下：
javascript
// 监听播放器 播放时触发
$player.addEventListener('play', function () {
$("#music_num"+currentIndex).removeClass('active_cur');
$("#music_num"+currentIndex).find('.playing').hide();
$("#music_num"+(currentIndex+1)).addClass('active_cur');
$("#music_num"+(currentIndex+1)).find('.playing').show();
});效果：
歌单、专辑、单曲列表播放
需要修改设置音乐播放器的脚本的方法和增加对播放操作的事件处理。
要到达的效果为：在歌单、专辑的单曲列表点击全部播放则添加所有单曲并播放第一个歌曲；
而在单曲列表中点击单曲的播放则增加当前单曲到播放列表并播放当前单曲。
音乐播放设置
增加对musicPlay类的点击事件响应处理，
获取按钮上的id和type，来进行单曲、歌单、专辑分别添加处理；
之后设置当前播放音乐显示和路径处理，播放列表显示处理，
音乐播放器播放状态并进行播放。
javascript
$('.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"+(nowNum+1));
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();
});添加单曲处理
视图中添加单曲音乐时，重复的单曲不再添加进入单曲中。
python
def add_player(request):
""" 添加歌曲到播放器 """
# 查询相应单曲
id = request.GET.get('id')
info = Singe.objects.filter(pk=id).first()
repeat = Player.objects.filter(singe=id).first()
if repeat:
return JsonResponse({'status': 1, 'msg': '添加"%s"成功！' % info.name})
if info:
# 加入到播放列表中
singerDb = Singler.objects.filter(id=info.singler_id).first()
# 新增单曲
playDb = Player()
playDb.name = info.name
# 建立关联
playDb.singe = info
playDb.singler = singerDb
playDb.save()
res = {'status': 1, 'msg': '添加"%s"成功！' % info.name}
else:
res = {'status': 0, 'msg': '该歌曲不存在，无法添加！'}
return JsonResponse(res)总结
本篇内容为音乐播放器表创建后的列表渲染，删除清空播放器功能；
播放音乐列表同步，添加播放音乐等功能实现。