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)

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/166808.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux环境部署应用必知必会

修改环境变量 Linux环境变量配置的6种方法&#xff0c;建议收藏&#xff01; - 知乎 修改java环境变量 软件安装 安装redis redis是一个非关系型数据库&#xff0c;是一个存储键值对的数据库&#xff0c;通常被称为数据结构服务器。 值&#xff08;value&#xff09;可以是…

《红蓝攻防对抗实战》二.内网探测协议出网之TCP/UDP协议探测出网

目录 一.TCP/UDP协议探测出网 1.NC工具探测TCP协议出网 2.Telnet命令探测TCP协议出网 3.UDP协议探测出网 当红队人员在进行内网渗透时&#xff0c;经常会遇到目标主机不出网的场景&#xff0c;而主机不出网的原因有很多&#xff0c;常见的原因例如目标主机未设置网关&#…

Zoho Creator推出全新的Canvas布局设计器功能

自2021年Zoho CRM的UI设计工具——Canvas画布功能发布以来&#xff0c;受到了广泛好评&#xff0c;它的出现为CRM的页面布局形式提供了更多选择和可能&#xff0c;让CRM用户彻底告别了“单调、死板、机械”的交互页面。 8月1日&#xff0c;Zoho Creator也推出了全新的Canvas画…

大数据之LibrA数据库系统服务部署原则及运行环境要求

服务部署原则 FusionInsight LibrA集群由多种服务按照一定的逻辑架构组合而成&#xff0c;每个服务包含一个或多个角色&#xff0c;每个角色可以部署一个或多个实例。 服务&#xff1a;服务对外表现为集群提供的组件业务能力&#xff0c;集群中的每个组件对应一个服务名&…

【LeetCode:86. 分隔链表 | 链表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【LeetCode:1402. 做菜顺序 | 动态规划 + 贪心】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

C++前缀和算法的应用:从仓库到码头运输箱子原理、源码、测试用例

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 双指针 单调双向队列 题目 你有一辆货运卡车&#xff0c;你需要用这一辆车把一些箱子从仓库运送到码头。这辆卡车每次运输有 箱子数目的限制 和 总重量的限制 。 给你…

函数模板和类模板实例介绍

模板&#xff1a;将类型定义为参数&#xff0c;实现类型参数化&#xff0c;实现代码重用。 一、函数模板 格式&#xff1a; &#xff08;template-声明模板的关键字&#xff0c;class修饰形参类型&#xff09; template <class / typename T> 返回类型 函数名&#xff…

顺应趋势,用大数据精准营销抓住大数据时代的机遇

想先问大家一个问题&#xff1a;“你觉得现在的营销好做吗&#xff1f;”想必大多数人在说到自己如何营销这一点上&#xff0c;都有道不完的“苦水”。“现在找客户难&#xff0c;投了几十万的广告费&#xff0c;真正来的客户却少得可怜&#xff0c;平均获客成本高得吓人”一位…

【Leetcode每日一题 2530】「贪心|模拟|优先队列」执行K次操作后的最大分数

2023.10.18 本题重点&#xff1a; 1.优先队列的使用 2.ceil()函数的使用相同的还有floor()函数的使用 题目介绍&#xff1b; 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。你的 起始分数 为 0 。 在一步 操作 中&#xff1a; 选出一个满足 0 < i < nums.l…

按键中断控制LED灯亮灭

EXTI—外部中断/事件控制器 EXTI&#xff08;External interrupt/event controller&#xff09;—外部中断/事件控制器&#xff0c;管理了控制器的 20 个中断/事 件线。每个中断/事件线都对应有一个边沿检测器&#xff0c;可以实现输入信号的上升沿检测和下降沿的 检测。EXTI可…

路由器的路由过程

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家来访。 路由器是连接不同的局域网的一个设备&#xff0c;它一开始的目的是互联异构网络的。 前言 这里…

阿伐曲泊帕的合并用药方案【医游记】

&#xff08;图片来源于网络&#xff01;&#xff09; 阿伐曲泊帕是一种口服的促血小板生成素受体激动剂&#xff0c;用于治疗择期行诊断性操作或手术的慢性肝病相关血小板减少症的成年患者。本文将介绍阿伐曲泊帕的药理作用和药物相互作用。 药理作用 阿伐曲泊帕可以与人体…

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅱ—— 创建和添加证书模板

目录 博文摘要3. 使用 Microsoft 证书颁发机构创建 Machine SSL 和 Solution User 证书模板3.1 打开 Certificate Template Console3.2 复制模板3.3 修改 Compatibility 选项卡3.4 修改 General 选项卡3.5 修改 Extensions 选项卡3.6 修改 Subject Name 选项卡3.7 确认新模板 4…

粘包和半包问题及解决办法

粘包问题是指数据在传输时&#xff0c;在一条消息中读取到了另一条消息的部分数据&#xff0c;这种现象就叫做粘包。 半包问题是指数据在传输时&#xff0c;接收端只收到了部分数据&#xff0c;而非完整的数据&#xff0c;就叫做半包。 产生粘包和半包问题原因&#xff1a; …

Ubuntu更新镜像源切换

概述 用ubuntu用apt命令&#xff0c;自动安装或更新包的时候&#xff0c;默认的镜像源服务器非常卡&#xff0c;很不方便。切换到国内的镜像源&#xff0c;下载更新非常快。为防止以后忘记&#xff0c;本文以国内服务器阿里巴巴的为例简单描述。 版本 Ubuntu23.10 找到更新…

SOAR安全事件编排自动化响应-安全运营实战

SOAR是最近几年安全市场上最火热的词汇之一。各个安全产商都先后推出了相应的产品&#xff0c;但大部分都用得不是很理想。SOAR不同与传统的安全设备&#xff0c;买来后实施部署就完事&#xff0c;SOAR是一个安全运营系统&#xff0c;是实现安全运营过程中人、工具、流程的有效…

Map<String, Object> 和 com.fasterxml.jackson.databind.node.ObjectNode区别

Map<String, Object>和com.fasterxml.jackson.databind.node.ObjectNode都可以用来表示一个键值对集合&#xff0c;其中键是字符串&#xff0c;值可以是任何对象。 Map<String, Object>是Java标准库中的一种数据结构&#xff0c;用于存储一组键值对。它是一个接口…

4、Kafka 消费者

5.1 Kafka 消费方式 5.2 Kafka 消费者工作流程 5.2.1 消费者总体工作流程 5.2.2 消费者组原理 Consumer Group&#xff08;CG&#xff09;&#xff1a;消费者组&#xff0c;由多个consumer组成。形成一个消费者组的条件&#xff0c;是所有消费者的groupid相同。 • 消费者组内…