教育教学网站建设,建设网站意义,自己如何做网站统计,关键词你们懂的使用Python Django框架做一个音乐网站#xff0c; 本篇音乐播放器功能完善#xff1a;顺序播放、设置播放数、歌词滚动等功能。 目录
顺序播放
设置顺序播放
单曲播放数
添加路由
视图处理
模板处理
歌词滚动
视图内容返回修改
样式设置
模板内容
歌词滚动脚本
歌… 使用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(currentIndex1));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, nameadd_play_num), 视图处理
通过模板传递的单曲id查询单曲记录
如果存在即在原来基础上增加1
最后返回状态并做json处理。
内容如下
def add_play_num(request): 增加单曲播放量 id request.GET.get(id)info Singe.objects.filter(pkid).first()if info:info.playnum 1info.save()return JsonResponse({status: 1, msg: 操作成功}) 模板处理
对audio媒体监听播放事件时获取当前播放歌曲的单曲id传递给视图进行处理。
内容如下
// 监听播放器 播放时触发
$player.addEventListener(play, function () {// 处理同步播放列表 播放状态$(#music_numcurrentIndex).removeClass(active_cur);$(#music_numcurrentIndex).find(.playing).hide();$(#music_num(currentIndex1)).addClass(active_cur);$(#music_num(currentIndex1)).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(idsid).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, encodingutf-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 typehidden idtext value{{lyric_text}}
div classlyric 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 idly/ul);for (let i 0; i result.length; i) {let $li $(li classld/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 classplay_leftdiv classmusic_titlespan classmusic_name七里香 – 周杰伦/spanspan classtotalTimeSpan/04:59/spanspan classplayTimeSpan00:00/spaninput typehidden idnow_music value0/divdiv classmusic_ratediv classmusic-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 idly/ul);
for (let i 0; i result.length; i) {let $li $(li classld/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 总结
本篇还是播放器功能完善主要实现功能为
播放列表顺序播放添加单曲播放数播放时歌词滚动等功能实现。
