使用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 ' +
'' + (i + 1) +
'';
} else {
play_html += '' +
'' + (i + 1) + '' +
'';
}
监听媒体播放事件
在原有加载播放器事件中增加监听媒体播放事件处理，在这里处理同步音乐播放和列表状态。
内容如下：
// 监听播放器 播放时触发
$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 = info
playDb.singler = singerDb
playDb.save()
res = {'status': 1, 'msg': '添加“%s”成功！' % info.name}
else:
res = {'status': 0, 'msg': '该歌曲不存在，无法添加！'}
return JsonResponse(res)
总结
本篇内容为音乐播放器表创建后的列表渲染，删除清空播放器功能；
播放音乐列表同步，添加播放音乐等功能实现。
$(function() {
setTimeout(function () {
var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
if (mathcodeList.length > 0) {
for (let i = 0; i < mathcodeList.length; i++) {
if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) {
var alt = mathcodeList[i].alt;
alt = '\(' + alt + '\)';
var curSpan = $('');
curSpan.text(alt);
$(mathcodeList[i]).before(curSpan);
$(mathcodeList[i]).remove();
}
}
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}, 1000)
});
优惠劵
阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
JSON_L
关注
关注
-
1
点赞
-
踩
-
0
收藏
觉得还不错?
一键收藏
-
打赏
-
0
评论
-
复制链接
专栏目录
django项目实战一个音乐网站的实现（侧边音乐播放器）
04-17
django后端框架实现的音乐播放平台，包含分页、批量处理、侧边隐藏式音乐播放器、酷炫的界面导航，无数据库可直接运行
Python基于Django在线音乐播放网站设计
计算机源码设计案例的博客
10-05
5492
开发软件： Pycharm 开发语言： Python3.7
今天给大家带来的是一个基于Python语言开发的Django框架的在线音乐网站，有前台和后台哦！前台用户可以注册和登录网站，用户可以根据歌曲关键词搜索歌曲，可以按照歌曲分类查看歌曲排行或者总排行，打开歌曲播放页面可以在线试听可以带歌词显示，可以点评歌曲和下载歌曲，可以按照下载榜和热搜榜查询歌曲，用户个人中心可以查看自己听过的歌曲历史记录；管理员登录后可以管理所有信息包括注册用户信息，歌曲分类和歌曲信息，歌曲动态信息，歌曲评论信息等。
管理..
参与评论
您还未登录，请先
登录
后发表或查看评论
Django实现简单的音乐播放器 3
json_li的博客
07-06
959
在原有音乐播放器上请求方式优化和增加加载本地音乐功能。
基于Python+Django的在线音乐网站设计与实现源码+sql数据库(毕设源码).zip
06-15
今天给大家带来的是一个基于Python语言开发的Django框架的在线音乐网站，有前台和后台哦！前台用户可以注册和登录网站，用户可以根据歌曲关键词搜索歌曲，可以按照歌曲分类查看歌曲排行或者总排行，打开歌曲播放...
music-player:基于Django的音乐播放器
04-29
基于Django的音乐流媒体网站网站预览主页详细页面安装 :package: 点安装-r requirements.txt克隆将此仓库克隆到本地计算机。在本地运行服务器$ python manage.py runserver 转到本地主机：8000特征 :clipboard: :...
Python基于Django在线音乐网站设计毕业源码案例设计.zip
10-05
1、该资源内项目代码都经过测试运行成功，功能...3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 -------- 下载后请首先打开README.md文件（如有），仅供学习参考。
norae-music-player:基于Django的音乐播放器
04-05
基于Django的音乐播放器前端HTML，CSS和JavaScript 后端的Python和SQlite 当前可用的操作是：播放，暂停，音量更改要运行音乐播放器... 下载整个软件包或克隆仓库在命令行中，运行“ python manage.py ...
redis(其它操作、管道)、django中使用redis(通用方案、 第三方模块)、django缓存、celery介绍（celery的快速使用）
linjun的博客
10-18
396
redis(其它操作、管道)、django中使用redis(通用方案、 第三方模块)、django缓存、celery介绍（celery的快速使用）
Python 框架学习 Django篇 (四) 数据库增删改查(CURD)
默子昂
10-19
269
接口文档案例
3、路由分发函数
vi Django_demo/Django_demo/urls.py
vi Django_demo/Django_demo/settings.py
定义api函数vi Django_demo/mgr/k8s.py
定义mgr下的子路由vi Django_demo/mgr/urls.py
4、测试验证
1、添加数据模型
vi Django_demo/mgr/models.py
vi Django_demo/
通过Gunicorn、Supervisor和Nginx更好地运行Django
panzhixiang
10-18
421
Gunicorn 提供了许多可配置的选项，可以根据自己的需求去调整其行为，比较常用的方式是创建一个 Gunicorn 配置文件可以让你的配置更加结构化和方便管理。：由于每个请求都由各自的 worker 进程处理，如果一个请求导致 crash 或者未捕获的异常，那么只会影响到正在处理该请求的 worker，其他 worker 或请求将不受影响。：如果你的网站需要 SSL 加密，Nginx 可以处理所有的 HTTPS 握手过程，并与后端服务器进行非加密通信，这样就减轻了后端服务器的负担。
分享一个基于Python+Django的高校食堂外卖点餐系统的设计实现（源码、调试、开题、lw、ppt）
m0_72599287的博客
10-19
213
分享一个基于Python+Django的高校食堂外卖点餐系统的设计实现（源码、调试、开题、lw、ppt）
django无法导入第三方库
guido
10-17
472
有的时候，问题是显而易见的，但就是这么明显的错误，可能会耽误很长时间。遇到bug，先承认bug，然后思考bug产生的原因，而后排查。
django 项目基本配置
weixin_47906106的博客
10-20
198
如果是协同开发数据库表是提前准备好的，可以将表的字段映射到本地。切换至apps目录创建子应用。setting配置文件。
Python 框架学习 Django篇 (三) 链接数据库
默子昂
10-18
412
1、ORM 解析过程
2、python代码与sql语句关系图
2、安装pymysql库
3、配置django项目指定数据库
vi Django_demoDjango_demosettings.py
vi Django_demoDjango_demo__init__.py
4、创建新项目
vi Django_demo/paas/models.py
配置说明
6、添加联系数据库表
vi Django_demo/paas/app
django cloudflare csrf 403
wangjinyu124419的博客
10-18
394
网站套了cloudflare flare发现登录接口403了，csrf验证失败，CSRF_TRUSTED_ORIGINS=[“网站域名.com”]debug设置为False。
Django中ORM框架的各个操作
IT小辉同学
10-19
349
当出现大太阳的时候，我只想为你一人撑伞......
基于Django与深度学习的股票预测系统 计算机竞赛
Mr.D学长
10-20
240
优质竞赛项目系列，今天要分享的是 **基于Django与深度学习的股票预测系统 **该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：3分创新点：5分。
Python 框架学习 Django篇 (五) Session与Token认证
最新发布
默子昂
10-20
142
需要验证请求的cookie里面是否有sessionid，并且检查session表，看看是否存在session_key为该sessionid 的一条记录，该记录的数据字典里面是否 包含了 usertype 为 mgr 的 数据，我们可以把前面数据库增删改查视为我们的主页，只需要从主页函数调用之前去做下检查即可。
Django框架音乐网站选题意义
04-23
音乐网站是一个非常流行的网站类型，可以吸引一大批用户。作为一个Web开发者，选择使用Django框架来开发音乐网站具有以下意义：
1. 简单易用：Django框架具有非常简单易用的特点，开发者可以快速地构建出一个基于MVC架构的Web应用程序。
2. 提高开发效率：Django框架提供了大量的现成组件和库，可以帮助开发者快速地构建出一个功能完善的网站，从而提高开发效率。
3. 安全性好：Django框架具有非常高的安全性，可以有效地防止常见的Web攻击，为用户提供更加安全可靠的服务。
4. 可维护性强：Django框架的代码组织非常规范，开发者可以轻松地维护和升级整个应用程序。
因此，选择使用Django框架来开发音乐网站具有非常重要的意义。
“相关推荐”对你有帮助么？
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交
window.csdn.csdnFooter.options = {
el: '.blog-footer-bottom',
type: 2
}
JSON_L
CSDN认证博客专家
CSDN认证企业博客
码龄8年
暂无认证
- 236
- 原创
- 6999
- 周排名
- 3284
- 总排名
- 67万+
- 访问
-
- 等级
- 6515
- 积分
- 4543
- 粉丝
- 380
- 获赞
- 126
- 评论
- 669
- 收藏
私信
关注
![]()
(adsbygoogle = window.adsbygoogle || []).push({});
![]()
热门文章
-
php实现水仙花数的5个示例
26226
-
wamp You don't have permission to access / on this server等问题的解决.
26052
-
jQuery UI Datepicker 选择时分秒
22888
-
MySQL大数据表增加字段、索引实现
21317
-
通过IP地址获取当前地理位置（省份）
20527
分类专栏
-
PHP
69篇
-
ThinkPHP
30篇
-
Laravel
32篇
-
Yii2
5篇
-
Python
21篇
-
Django
32篇
-
Django项目
25篇
-
微信
7篇
-
前端
16篇
-
Mysql
服务器托管网
16篇
-
Redis
6篇
-
Git
4篇
-
服务器
29篇
-
消息
3篇
-
MongoDB
1篇
-
工具
7篇
-
编程知识
3篇
最新评论
您愿意向朋友推荐“博客详情页”吗？
-
强烈不推荐
-
不推荐
-
一般般
-
推荐
-
强烈推荐
提交
最新文章
-
Django实现音乐网站 ⒇
-
Django实现音乐网站 ⒆
-
Django 联表查询操作
2023
10月
3篇
09月
7篇
08月
16篇
07月
8篇
06月
12篇
05月
17篇
04月
16篇
03月
11篇
02月
13篇
01月
11篇
2022年21篇
2021年27篇
2020年8篇
2019年20篇
2018年8篇
2017年26篇
2016年66篇
(adsbygoogle = window.adsbygoogle || []).push({});
![]()
目录
$("a.flexible-btn").click(function(){
$(this).parents('div.aside-box').removeClass('flexible-box');
$(this).parents("p.text-center").remove();
})
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
北风之神c:
总结的很全面，写得赞，博主用心了，但主要还是celery太难用了。
celery对目录层级文件名称格式要求太高，只适合规划新的项目，对不规则文件夹套用难度高。
所以新手使用celery很仔细的建立文件夹名字、文件夹层级、python文件名字。
所以网上的celery博客教程虽然很多，但是并不能学会使用，因为要运行起来需要以下6个方面都掌握好，博客文字很难表达清楚或者没有写全面以下6个方面。
celery消费任务不执行或者报错NotRegistered，与很多方面有关系，如果要别人排错，至少要发以下6方面的截图，因为与一下6点关系很大。
1)整个项目目录结构, 2）@task入参 ,3）celery的配置，4）celery的配置 include ,5）cmd命令行启动参数 --queues= 的值,6）用户在启动cmd命令行时候，用户所在的文件夹。
在不规范的文件夹路径下，使用celery难度很高，一般教程都没教。
[项目文件夹目录格式不规范下的celery使用演示](https://github.com/ydf0509/celery_demo) 。
此国产分布式函数调度框架 funboost python万能通用函数加速器 https://funboost.readthedocs.io/ ，
从用法调用难度，用户所需代码量，超高并发性能，qps控频精确程度，支持的中间件类型，任务控制方式，稳定程度等19个方面全方位超过celery。发布性能提高1000%，消费性能提高2000%。
python万能分布式函数调度框架funboost支持python所有类型的并发模式和一切知名消息队列中间件，python函数加速器，框架包罗万象,万能编程功能宝典，一统编程思维，与业务不绑定，适用范围广。
funboot能支持celery作为中间件，用户可以使用funboost的极简api来使用celery核心调度，不用手动复杂的配置操作celery
funboost 自动化操作celery https://github.com/ydf0509/funboost_support_celery_demo
pip
JSON_L:
有帮助就好
hou@:
多谢博主
JSON_L:
生成迁移文件后还得执行迁移文件，才能创建表。
甲予:
为啥生成迁移文件，别的表有，没有我定义的表