Django实现音乐网站 (21)

2023-10-20 15:20
文章标签 实现 21 django 音乐网站

本文主要是介绍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});}});
}

清空功能实现

播放器音乐列表清空列表元素增加调用清空列表方法。

内容如下:

<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中渲染音乐播放器列表处理。

内容如下:

'<i title="删除歌曲" class="glyphicon glyphicon-trash" onclick="clear_player('+ music_list[i].id +', 1)"></i>&nbsp;&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 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">';}

监听媒体播放事件

在原有加载播放器事件中增加监听媒体播放事件处理,在这里处理同步音乐播放和列表状态。

内容如下:

// 监听播放器 播放时触发
$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,来进行单曲、歌单、专辑分别添加处理;

之后设置当前播放音乐显示和路径处理,播放列表显示处理,

音乐播放器播放状态并进行播放。

$('.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();
});

添加单曲处理

视图中添加单曲音乐时,重复的单曲不再添加进入单曲中。

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 = infoplayDb.singler = singerDbplayDb.save()res = {'status': 1, 'msg': '添加“%s”成功!' % info.name}else:res = {'status': 0, 'msg': '该歌曲不存在,无法添加!'}return JsonResponse(res)

总结

本篇内容为音乐播放器表创建后的列表渲染,删除清空播放器功能;

播放音乐列表同步,添加播放音乐等功能实现。

这篇关于Django实现音乐网站 (21)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/247973

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、