当前位置: 首页 > news >正文

Django实现音乐网站 (22)

使用Python Django框架做一个音乐网站,

本篇音乐播放器功能完善:顺序播放、设置播放数、歌词滚动等功能。

目录

顺序播放

设置顺序播放

单曲播放数

添加路由

视图处理

模板处理

歌词滚动

视图内容返回修改

样式设置

模板内容

歌词滚动脚本

歌词滚动判断

模板设置

播放器脚本修改

设置音乐

播放器初始化修改

歌曲详情修改

借鉴博客

项目源码

项目目录结构

说明

下载地址

总结


顺序播放

当播放完一首歌曲后,继续播放下一首,循环播放列表中的单曲。

实践发现使用audio媒体的loop属性只是对当前的单曲的循环播放。

需自定义实现循环播放功能。

设置顺序播放

通过监听播放器结束事件,设置触发播放下一曲。

脚本内容如下:

$player.addEventListener('ended', function () {if (currentIndex < (music_list.length - 1)) {currentIndex += 1;} else {// 切换为第一首currentIndex = 0;}// 设置播放标识为暂停$dian.className = 'glyphicon glyphicon-play';// 播放时间$('.playTimeSpan').text('00:00');// 设置歌曲进度归零$('.music-progress').css('width', '1px');// 设置歌曲setMusic();// 同步播放列表状态var nowDiv = $("#play_list").children('.active_cur');nowDiv.find('.playing').hide();nowDiv.removeClass('active_cur');var newDiv = $("#music_num"+(currentIndex+1));newDiv.addClass('active_cur');newDiv.find('.playing').show();// 设置播放器 播放状态var music_dian = $('#music_dian');if (music_dian.attr('class') == 'glyphicon glyphicon-play') {music_dian.attr('class', 'glyphicon glyphicon-pause');}$player.play();
});

单曲播放数

在歌曲播放时,增加歌曲播放数功能;在排行榜中需要播放数进行排序。

添加路由

# 增加播放数
path('add_play_num', views.add_play_num, name='add_play_num'),

视图处理

通过模板传递的单曲id,查询单曲记录;

如果存在:即在原来基础上增加1;

最后返回状态并做json处理。

内容如下:

def add_play_num(request):""" 增加单曲播放量 """id = request.GET.get('id')info = Singe.objects.filter(pk=id).first()if info:info.playnum += 1info.save()return JsonResponse({'status': 1, 'msg': '操作成功!'})

模板处理

对audio媒体监听播放事件时,获取当前播放歌曲的单曲id,传递给视图进行处理。

内容如下:

// 监听播放器 播放时触发
$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();// 增加单曲播放数$. get('/add_play_num', {'id':music_list[currentIndex].song_id}, function (msg) {if(msg.status == 1) {layer.msg(msg.msg, {icon: 6});} else {layer.msg(msg.msg, {icon: 5});}});
});

效果:

歌词滚动

在歌曲详情中播放音乐时,歌词与播放进度同步滚动显示。

视图内容返回修改

原来的视图中歌词处理为列表了,现在只需要通过join函数连接为文本即可。

内容如下:

def album_song(request):""" 专辑中单曲详情 """sid = request.GET.get('sid')song_info = Singe.objects.filter(id=sid).first()# 反向查询专辑info = song_info.album_set.first()# 歌词处理lyrics = []if song_info:lyrics = read_lyric(song_info.lyric)lyric_text = "".join(lyrics)return render(request, 'album/song.html', locals())def read_lyric(path):""" 读取歌词文件 """f = open(os.path.join(settings.MEDIA_ROOT, str(path)), 'r', encoding='utf-8')lines = []for line in f:lines.append(line)f.close()return lines

样式设置

设置歌词滚动功能所需的样式。

内容如下:

.bg {/* 歌词调整区 */width: 100%;/* 歌词显示盒子宽 */height: 200px;/* 歌词显示盒子高度,需要多显示几行歌词相应调大即可 *//* background-color:#333; *//* 歌词背景颜色 */margin: 15px auto;color: darkgrey;/* 歌词默认颜色,灰色 */font-size: 15px; /* 歌词字体默认大小 */overflow: hidden;position: relative;font-family: "宋体"; /*字体可以随便换*/
}.bg ul {width: 100%;position: absolute;top: 0;left: 0;list-style: none;
}.bg ul li {width: 100%;height: 30px;line-height: 30px;text-align: left;
}.bg ul li.active { /* 歌词高亮滚动区 */color: #ffe12c;font-size: 18px;
}

模板内容

把歌词文本放入一个隐藏输入框中及设定歌词渲染的元素。

内容如下:

<input type="hidden" id="text" value="{{lyric_text}}">
<div class="lyric lyricAll bg"></div>

歌词滚动脚本

歌词滚动效果,用的网上的文章内容做的,能够实现滚动;

就是有两个问题:

1.播放进度与显示进度不符。

2.滚动的速度太快了,歌词显示选中的都已经卷过了。

之后有时间就调试一下,这两个问题归根其实是一个问题,播放进度与显示进度不符。

分割歌词、歌曲进度计算、设置卷动速度都调了一遍,发现没问题。

最后发现设置元素这里有问题,给ul、li分别设置了id、class完美实现歌词滚动。

脚本内容如下:

$(function() {function parseLyric(text) {//按行分割歌词let lyricArr = text.split('\n');let result = []; //新建一个数组存放最后结果// 遍历分割后的歌词数组,将格式化后的时间节点,歌词填充到result数组for (i = 0; i < lyricArr.length; i++) {let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|\:)\d{2})\]/g); //正则匹配播放时间let lineLyric = "";if (lyricArr[i].split(playTimeArr).length > 0) {lineLyric = lyricArr[i].split(playTimeArr);}if (playTimeArr != null) {for (let j = 0; j < playTimeArr.length; j++) {let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");// 数组填充result.push({time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),content: String(lineLyric).substr(1)});}}}return result;}// 这里请按照格式放入相应歌词--开始let text = $('#text').val();// 这里请按照格式放入相应歌词--结束let audio = document.querySelector('audio');// 执行lyc解析let result = parseLyric(text);// 把生成的数据显示到界面上去let $ul = $("<ul id='ly'></ul>");for (let i = 0; i < result.length; i++) {let $li = $("<li class='ld'></li>").text(result[i].content);$ul.append($li);}$(".bg").append($ul);// 当前行歌词let lineNo = 0;// 当播放6行后开始滚动歌词let preLine = 1;// 每次滚动的距离let lineHeight = -30;// 滚动播放 歌词高亮 增加类名activefunction highLight() {let $li = $(".ld");$li.eq(lineNo).addClass("active").siblings().removeClass("active");if (lineNo > preLine) {$ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });}}highLight();// 播放的时候不断渲染audio.addEventListener("timeupdate", function() {if (lineNo == result.length) return;if ($(".ld").eq(0).hasClass("active")) {$("#ly").css("top", "0");}lineNo = getLineNo(audio.currentTime);highLight();lineNo++;});// 当快进或者倒退的时候,找到最近的后面那个result[i].timefunction getLineNo(currentTime) {if (currentTime >= parseFloat(result[lineNo].time)) {// 快进for (let i = result.length - 1; i >= lineNo; i--) {if (currentTime >= parseFloat(result[i].time)) {return i;}}} else {// 后退for (let i = 0; i <= lineNo; i++) {if (currentTime <= parseFloat(result[i].time)) {return i - 1;}}}}// 播放结束自动回到开头audio.addEventListener("ended", function() {lineNo = 0;highLight();audio.play();$("#ly").css("top", "0");});
});

效果:

歌词滚动判断

增加歌词滚动判断是否为播放当前音乐;因为歌词滚动功能在歌曲详情实现的,如果不加判断,在播放歌曲时,查看另外一首歌曲的详情也会滚动。

模板设置

在设置音乐播放的盒子中,增加一个隐藏输入框,

用来设置当前播放音乐的id,用以歌词滚动判断。

内容如下:

<div class="play_left"><div class="music_title"><span class="music_name">七里香 – 周杰伦</span><span class="totalTimeSpan">/04:59</span><span class="playTimeSpan">00:00</span><input type="hidden" id="now_music" value="0"></div><div class="music_rate"><div class="music-progress"></div></div>
</div>

播放器脚本修改

设置音乐

在音乐播放器play.js中设置音乐的方法中,增加设置隐藏输入框当前音乐id.

内容如下:

// 设置播放器歌曲信息
function setMusic() {// 设定歌曲封面$('#music_img').attr('src', music_list[currentIndex].cover);// 设定歌曲名称和歌手$('.music_name').text(music_list[currentIndex].song_name +' - ' + music_list[currentIndex].singer);// 设定歌曲路径$player.src = music_list[currentIndex].song_path;// 设置当前播放音乐id$('.now_music').val(music_list[currentIndex].song_id);
}

播放器初始化修改

需要在播放器初始化方法中也增加设置。

内容如下:

$('#now_music').val(music_list[currentIndex].song_id);

歌曲详情修改

在歌曲详情歌词滚动脚本中增加判断是否为当前播放音乐。

原来脚本内容的基础上,在歌词渲染完毕之后,

增加三行内容判断是否为播放当前音乐,

如果不是,则终止向下执行。

内容如下:

// 把生成的数据显示到界面上去
let $ul = $("<ul id='ly'></ul>");
for (let i = 0; i < result.length; i++) {let $li = $("<li class='ld'></li>").text(result[i].content);$ul.append($li);
}
$(".bg").append($ul);// 判断播放音乐是否为当前页音乐
let now_music = $('#now_music').val();
let page_music = "{{song_info.id}}";
if(now_music != page_music) return;

借鉴博客

html页面制作滚动歌词_网页版动态歌词-CSDN博客

项目源码

如果觉得通过文章讲解不直观或者还是有些不懂的,

可以下载源码再针对某方面内容仔细查看。

项目目录结构

说明

Media:前端和后台上传文件媒体目录

myMusic:项目工程目录

Player:项目子应用目录

Static:项目静态文件存储目录

Templates:应用模板路径

Mymusic.sql 音乐网站数据库表文件

下载地址

链接:百度网盘 请输入提取码

提取码:13lq

总结

本篇还是播放器功能完善,主要实现功能为:

播放列表顺序播放;添加单曲播放数;播放时歌词滚动等功能实现。

相关文章:

Django实现音乐网站 (22)

使用Python Django框架做一个音乐网站&#xff0c; 本篇音乐播放器功能完善&#xff1a;顺序播放、设置播放数、歌词滚动等功能。 目录 顺序播放 设置顺序播放 单曲播放数 添加路由 视图处理 模板处理 歌词滚动 视图内容返回修改 样式设置 模板内容 歌词滚动脚本 歌…...

pnpm ERR_PNPM_ADDING_TO_ROOT

ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don’t wa…...

统计学习方法 拉格朗日对偶性

文章目录 统计学习方法 拉格朗日对偶性原始问题对偶问题原始问题和对偶问题的关系 统计学习方法 拉格朗日对偶性 读李航的《统计学习方法》时&#xff0c;关于拉格朗日对偶性的笔记。 在许多统计学习的约束最优化问题中&#xff0c;例如最大熵模型和支持向量机&#xff0c;常…...

.rancher-pipeline.yml

一、注意点 其实下文二的image是基于这个镜像作为基础镜像在这个镜像中执行打包&#xff0c;shellScript 当前路径是你代码块与上图settings.xml&#xff0c;图中的settings.xml可以替换下你当前镜像的settings.xml 示例 二、.rancher-pipeline.yml ${CICD_GIT_BRANCH}这些从官…...

RK3588平台开发系列讲解(显示篇)MIPI DSI协议介绍之分层

🚀返回专栏总目录 文章目录 一、MIPI DSI 分层1.1、应用层1.2、协议层1.3、链路层1.4、物理层沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 DSI 全称是 Display Serial Interface,是主控和显示模组之间的串行连接接口。 MIPI DSI 接口分为数据线和时钟线,均为…...

前端学成在线项目详细解析三

19-推荐课程-内容样式 HTML结构 <ul><li><a href"#"><div class"pic"><img src"./uploads/course01.png" alt""></div><div class"text"><h4>JavaScript数据看板项目实战…...

使用Kali进行实验---主机发现

主机发现 【实训目的】 掌握主机扫描的工作原理&#xff0c;学会使用ping等扫描工具&#xff0c;发现网络当中活跃的主机。 【场景描述】 在虚拟机环境下配置4个虚拟系统“Win XP1” “Win XP2” “Kali Linux”和“Metasploitable2”&#xff0c;使得4个系统之间能够相互通…...

美团笔试真题2023第一场(4题)

点评&#xff1a; 题目总体来说偏向于中下难度 1.字符串前缀 题目描述&#xff1a; 现在有两个字符串S和T&#xff0c;你需要对S进行若干次操作&#xff0c;使得S是T的一个前缀&#xff08;空串也是一个前缀&#xff09;。每次操作可以修改S的一个字符&#xff0c;或者删除一个…...

PHP explode (多)分隔符(delimiters) 使用

PHP explode (多)分隔符(delimiters) 使用 问题&#xff1a;[https://blog.csdn.net/YBaog?typeblog] 把链接中所有的字符串取出。 ㊙️ 神秘算法 ㊙️ function multi_explode($delimiters, $string) {$data [];if ($string) {$str str_replace($delimiters, $delimiter…...

AI的Prompt是什么

一.AI的Prompt的作用 在人工智能&#xff08;AI&#xff09;中&#xff0c;"Prompt"通常指的是向AI系统提供的输入或指令&#xff0c;用于引导AI进行特定的操作或生成特定的输出。例如&#xff0c;在一个对话型AI系统中&#xff0c;用户输入的问题就是一个prompt&…...

Qt之自定义model读写CSV文件

一.效果 本文基于QAbstractTableModel实现了一个支持读写CSV文件的TableModel。CSV数据格式虽然很简单,但是网上大多数读写方式其实都是有bug的,没考虑到字段里包含逗号或换行符这种复杂数据的情况。 二.原理 CSV(Comma-Separated Values)文件是一种简单类型的纯文本文件…...

golang 工程组件:grpc-gateway 环境安装+默认网关测试

grpc-gateway grpc-gateway 顾名思义是专门是grpc的网关。也是一个protobuf的编译器&#xff0c;是一个proto的插件。 grpc-gateway就是将http请求处理后转发到对应grpc服务上。很多浏览器&#xff0c;或者客户端开箱不支持grpc&#xff0c;只支持传统的restful API。 grpc网关…...

IP地址SSL证书 IP证书

在许多企业用例中&#xff0c;公司需要SSL证书作为IP地址。公司使用IP地址通过Internet访问各种类型的应用程序。 公网IP地址的SSL证书&#xff1a; 内部IP&#xff08;也称为私有IP&#xff09;是IANA设置为保存的IPv4或IPv6地址&#xff0c;例如&#xff1a; RFC 1918范围内…...

MVCC 过程中会加锁吗?

MVCC 机制&#xff0c;全称&#xff08;Multi-Version Concurrency Control&#xff09;多版本并发控制&#xff0c;是确保 在高并发下&#xff0c; 多个事务读取数据时不加锁也可以多次读取相同的值。 MVCC 在读已提交&#xff08;READ COMMITTED&#xff09;、可重复读&…...

NLP入门——语言结构/语言建模

一、Linguistics 语言学 wordsmorphology 形态学&#xff1a;词的构成和内部结构研究。如英语的dog、dogs和dog-catcher有相当的关系morpheme 语素&#xff1a;最小的语法单位&#xff0c;是最小的音义结合体lexeme 词位&#xff1a;词的意义的基本抽象单位&#xff0c;是一组…...

2023java攻克了抖音视频去水印视频下载

2023java攻克了抖音视频去水印视频下载 1、过滤链接 /*** 过滤链接&#xff0c;获取http连接地址* param url* return*/public static String decodeHttpUrl(String url) {int start url.indexOf("http");int end url.lastIndexOf("/");String decodeu…...

云计算要学习哪些技术?

学习云计算需要涉及多个技术领域和相关的工具、平台和框架。以下是一个详细的介绍&#xff0c;帮助您了解学习云计算所需的技术。 1. 虚拟化技术 虚拟化是云计算的基础&#xff0c;因此了解虚拟化技术至关重要。学习虚拟化技术时&#xff0c;需要掌握以下知识点&#xff1a; …...

Spring bean 和 Java Bean的区别

Spring bean 和 Java Bean的区别 一&#xff0c;JavaBean JavaBean 是一种特殊的 Java 类&#xff0c;遵循一定的命名规范和属性访问规范。它是一种用于表示简单数据类型、封装业务逻辑或与其他对象交互的可重用组件。 JavaBean 必须满足以下规范&#xff1a; 公共无参构造方…...

性能测试 —— Jmeter 命令行详细

我们在启动Jmeter时 会看见&#xff1a;Don’t use GUI mode for load testing !, only for Test creation and Test debugging.For load testing, use CLI Mode (was NON GUI) 这句话的意思就是说&#xff0c;不要使用gui模式进行负载测试&#xff0c;gui模式仅仅是创建脚本…...

ChatGPT AIGC 办公自动化拆分Excel工作表

在职场办公中对数据的操作,经常需要将一份表格数据拆分成多个表。 但是在Excel中进行表格拆分的步骤比较多。 在Excel中拆分工作表的步骤: 1.打开您的Excel工作簿,选择您要拆分的工作表。 2.右键单击工作表标签(通常在底部),选择“移动或复制”。 3.在“移动或复制”…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...