网站是做流程图,公司logo设计在线制作,合肥网站建设黄页,唐山建站公司模板使用Python Django框架做一个音乐网站#xff0c; 本篇主要为排行榜功能及音乐播放器部分功能实现。 目录
推荐排行榜优化
设置歌手、单曲跳转链接
排行榜列表渲染优化
视图修改如下#xff1a;
模板修改如下#xff1a;
单曲详情修改
排行榜列表
设置路由
视图处理… 使用Python Django框架做一个音乐网站 本篇主要为排行榜功能及音乐播放器部分功能实现。 目录
推荐排行榜优化
设置歌手、单曲跳转链接
排行榜列表渲染优化
视图修改如下
模板修改如下
单曲详情修改
排行榜列表
设置路由
视图处理
模板渲染
设置跳转入口
播放器功能开发
设置路由
模板页面
脚本渲染
列表渲染和播放器实现
音乐播放器列表展示关闭
总结 推荐排行榜优化
设置歌手、单曲跳转链接
因为歌手、单曲功能页面已开发现在终于可以设置跳转链接。
内容如下
div classtop_infop classsong_namea href{% url player:album_song %}?sid{{item.id}}{{ item.name }}/a/pp classsinglera href{% url player:singer_detail jitem.singler.id %}{{ item.singler.name }}/a/p
/div 排行榜列表渲染优化
之前排行榜是通过视图多个集合变量分别进行渲染在模板页面要写五个排行版模块分别进行渲染对应的排行榜经过尝试后整理到一个总排行榜列表集。
视图修改如下
def index(request): 显示首页 # 获取首页轮播图carousels Carousel.objects.all()# 推荐歌单 选播放量最多的五个songsheets SongSheet.objects.order_by(-playnum).all()[0:5]# 推荐排行榜rank_alls [# 热歌榜 取播放量最多的五个Singe.objects.order_by(-playnum).all()[0:5],# 新歌榜 取最新的五个Singe.objects.order_by(-id).all()[0:5],# 飙升榜Singe.objects.order_by(id).all()[0:5],# 欧美榜Singe.objects.order_by(-id).all()[0:5],# 日韩榜Singe.objects.order_by(id).all()[0:5]]# 推荐歌手 取单曲最多的六个singlers Singler.objects.order_by(-singe_num).all()[0:6]return render(request, index/index.html, locals()) 模板修改如下
两套循环嵌套外循环渲染父盒子内循环展示排行榜中列表内容
通过判断forloop.couter来调用相应排行榜背景图。
div classrecommend_rankdiv classtitlediv classname推荐排行榜/divullia href#更多/a/li/ul/divdiv classlist{% for rankitem in rank_alls %}div classbankdiv classbank_topdiv classimgimg classimg_tip src{% static images/ %}b{{forloop.counter}}.png alt/divimg classimg_bg src{% static images/ %}b{{forloop.counter}}_{{forloop.counter}}.jpg alt/divul classbank_list{% for hot in rankitem %}li{% if forloop.counter 1 %}div classtop_img top1/div{% elif forloop.counter 2 %}div classtop_img top2/div{% elif forloop.counter 3 %}div classtop_img top3/div{% else %}div classtop_index{{forloop.counter}}/div{% endif %}div classtop_infop classsong_namea href{% url player:album_song %}?sid{{hot.id}}{{ hot.name }}/a/pp classsinglera href{% url player:singer_detail hot.singler.id %}{{ hot.singler.name }}/a/p/div/li{% endfor %}/ul/div{% endfor %}/div
/div
!--推荐排行榜结束-- 单曲详情修改
因为之前单曲详情视图处理为查询相应专辑和单曲信息
需要传递两个参数即专辑id和单曲id。
但是通过排行榜跳转单曲详情没有专辑id故需要修改原来的处理。
通过单曲反向查询所属专辑信息。
内容如下
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)return render(request, album/song.html, locals()) 排行榜列表
设置路由
在子应用文件夹中urls.py中新增一条记录。
# 排行榜
path(rank, views.rank, namerank), 视图处理
榜单列表需要展示各个排行榜所有一定时间段中上榜单曲列表
因为前期单曲没有与类型表关联目前就只能做一个类似的功能。
下方代码中处理了分页查询通过id来区别类型进行排序
设置了榜单的名称更新时间是取单曲列表中时间最晚的一个时间。
def rank(request): 排行榜 id int(request.GET.get(id, 1))page int(request.GET.get(page, 1))singe_db Singe.objectsif id 1:song_list singe_db.order_by(-id).all()rank_name 新歌榜elif id 2:song_list singe_db.order_by(-playnum).all()rank_name 热歌榜elif id 3:song_list singe_db.order_by(playnum).all()rank_name 飙升榜elif id 4:song_list singe_db.order_by(-id).all()rank_name 抖音歌曲榜elif id 5:song_list singe_db.order_by(id).all()rank_name 万物DJ榜else:song_list singe_db.order_by(-playnum).all()rank_name 会员畅听榜# 实例化Paginatorpage_num 20paginator Paginator(song_list, page_num)try:res paginator.page(page)except PageNotAnInteger:res paginator.page(1)except EmptyPage:res paginator.page(paginator.num_pages)list_num len(res)# 榜单更新时间updatetime date.today()for item in song_list:if updatetime.ctime() item.updatetime.ctime():updatetime item.updatetimereturn render(request, rank/index.html, locals()) 模板渲染
在templates文件夹下创建rank文件夹并在其中创建index.html文件。
其他渲染都大同小异主要有一点新的东西因为榜单数据比较多在第一页时候有个前三名标识需要区别处理第二页之后的序列号和相应标识处理这里使用了模板中的过滤器。
内容如下
{% extends common/base.html %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
link relstylesheet href{% static css/rank.css %}!--导航条开始--
div classheaderimg src{% static images/logo.png %} classlogo altullia href{% url player:index %}推荐/a/lilia hrefjavascript:void(0) classselected排行榜/a/lilia href{% url player:singer 1 # %}歌手/a/lilia href{% url player:songsheet %}歌单/a/li/ul
/div
!--导航条结束--
div classmain_condiv classcon_ldiv classcondiv classtabs flex_cspan classactive官方/spanspan class特色/spanspan class场景/span/divul classtab_conli classflex_c activeimg alt classcover data-src{% static images/rank_list_1.png %} src{% static images/rank_list_1.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id1新歌榜/a/pp classtime今日更新/p/div/lili classflex_c activeimg alt classcover data-src{% static images/rank_list_2.png %} src{% static images/rank_list_2.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id2热歌榜/a/pp classtime今日更新/p/div/lili classflex_c activeimg alt classcover data-src{% static images/rank_list_3.png %} src{% static images/rank_list_3.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id3飙升榜/a/pp classtime今日更新/p/div/lili classflex_c activeimg alt classcover data-src{% static images/rank_list_4.png %} src{% static images/rank_list_4.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id4抖音歌曲榜/a/pp classtime今日更新/p/div/lili classflex_c activeimg alt classcover data-src{% static images/rank_list_5.png %} src{% static images/rank_list_5.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id5万物DJ榜/a/pp classtime今日更新/p/div/lili classflex_c activeimg alt classcover data-src{% static images/rank_list_6.png %} src{% static images/rank_list_6.png %} lazyloadeddiv classitem_infop classnamea href{% url player:rank %}?id6会员畅听榜/a/pp classtime今日更新/p/div/li/ul/div/divdiv classcon_rdivdivspan classtitle{{rank_name}}/span span classupdate_time更新时间{{updatetime}}/span/divdiv classbtnsbutton classplay bg_primaryi classglyphicon glyphicon-play/inbsp;span立即播放/span/buttonbuttoni classglyphicon glyphicon-plus/inbsp;span添加/span/buttonbuttoni classglyphicon glyphicon-heart/inbsp;span收藏/span/button/divdiv classlist_outdiv classlist_head head_name_rank styleul classflex_cli classhead_num序号/lili classhead_name歌曲/lili classhead_artist歌手/lili classhead_album发布时间/lili classhead_time时长/li/ul/divul classrank_list{% for item in res %}li classsong_item flex_cdiv classsong_rank flex_c{% if page 1 %}{% if forloop.counter 1 %}div classrank_num top1/div{% elif forloop.counter 2 %}div classrank_num top2/div{% elif forloop.counter 3 %}div classrank_num top3/div{% else %}div classrank_numspan{{forloop.counter}}/span/div{% endif %}{% else %}div classrank_numspan{{forloop.counter|add:page_num}}/span/div{% endif %}div classstatus/div/divdiv classsong_name flex_ca title{{item.name}} href{% url player:album_song %}?sid{{item.id}} classname{{item.name}}/a/divdiv classsong_artistspan title{{item.singler.name}}{{item.singler.name}}/span/divdiv classsong_albumspan{{item.addtime}}/span/divdiv classsong_timespan{{item.get_song_duration}}/span/divdiv classsong_opts flex_ci classglyphicon glyphicon-plus/ii classglyphicon glyphicon-play/ii classglyphicon glyphicon-heart/i/div/li{% endfor %}/ul{% if list_num 1 %}!--设置无数据内容--div classnodata flex_cdiv classinnerimg src{% static images/nodata.png %}alt classnodata_imgdiv classtipp暂无相关数据/p/div/div/div{% endif %}div classloading-mask styledisplay: none;div classloading-wrapdiv classloadspan classside1/span spanclassside2/span span classmid/spanspan classside2/span spanclassside1/span/div/div/div/div{% if list_num 0 %}!--设置分页页码--div classpagei classli-page glyphicon glyphicon-menu-left notPointer/iul{% for index in res.paginator.page_range %}{% if res.number index %}lia href# classnotCursor currentPage{{index}}/a/li{% else %}lia href{% url player:rank %}?page{{index}}{{index}}/a/li{% endif %}{% endfor %}/uli classglyphicon glyphicon-menu-right li-page/i/div{% endif %}/div/div
/div{% endblock content %} 设置跳转入口
点击推荐排行榜中更多按钮进入排行榜列表。
内容如下
div classtitlediv classname推荐排行榜/divullia href{% url player:rank %}更多/a/li/ul
/div 播放器功能开发
其他功能大致算完成了开始做播放音乐的功能开发。
播放器设置在网站的底部采用固定悬浮
可以左右切换音乐设置音量查看播放音乐列表。 设置路由
主要用来获取播放器音乐列表信息。
# 播放器列表
path(play_list, views.play_list, nameplay_list), 模板页面
播放器的主要功能采用之前使用html做的播放器
直接嵌入到django音乐网站基类模板templates/common/base.html的底部。
内容如下
div idmusic_alldiv classmusic_main styleopacity:1;background:#fffdiv classmusic_leftimg classmusic_img idmusic_img src{% static images/s1.jpg %} alt/divaudio idplayersource src/media/uploads/1691649371/七里香_-_周杰伦.mp3 typeaudio/mpeg您的浏览器不支持 audio 元素。/audiodiv classplay_leftdiv classmusic_titlespan classmusic_name七里香 – 周杰伦/spanspan classtotalTimeSpan/04:59/spanspan classplayTimeSpan00:00/span/divdiv classmusic_ratediv classmusic-progress/div/div/divdiv classplay_righti classglyphicon glyphicon-step-backward idmusic_prev/ii classglyphicon glyphicon-play idmusic_dian/ii classglyphicon glyphicon-step-forward idmusic_next/i/divdiv classmusic_rightullii classglyphicon glyphicon-th-list idsetList/i/lilii classglyphicon glyphicon-volume-up idsetVolume/i/lilidiv classsliderinput typerange idvolume min0 max100 value0/div/li/ul/div/divdiv classsongList styledisplay:nonediv classlist_top flex_cdiv idplay_title/divdiv classflex_cdiv classclear_alli classglyphicon glyphicon-trash/i spanclassclear_btn清空列表/span/divi classclose glyphicon glyphicon-remove/i/div/divdiv classlist_condiv idplay_list styletransition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);transition-duration: 0ms; transform: translate(0px) scale(1) translateZ(0px);overflow-y: scroll;height:400px;/divdiv styleposition: absolute; z-index: 9999; width: 7px; bottom: 2px; top: 2px; right: 1px; overflow: hidden;classbscroll-vertical-scrollbardiv stylebox-sizing: border-box; position: absolute; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 3px; width: 100%; transition-duration: 0ms; height: 190px; transform: translateY(0px) translateZ(0px); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);classbscroll-indicator/div/div/div/div
/div
效果 脚本渲染
使用JavaScript来实例化audio的提供的接口方法并结合后台数据进行渲染和调用audio来实现播放器功能。 列表渲染和播放器实现
内容如下
window.onload function () {// 绑定音频元素var $player document.getElementById(player);// 绑定播放按钮var $dian document.getElementById(music_dian);// 设置音频初始属性var volume_num 0.5;// 当前歌曲索引var currentIndex 0;// 设置播放列表var music_list [{id: 1,cover: /static/images/s1.jpg,singer: 周杰伦,song_name: 七里香,song_path: /media/uploads/1691649371/七里香_-_周杰伦.mp3},];// 设置播放器音乐列表var play_list document.getElementById(play_list);var play_title document.getElementById(play_title);// 初始化设置setInit();// 绑定音频控制开关$dian.onclick function () {if (this.classList glyphicon glyphicon-play) {this.className glyphicon glyphicon-pause;$player.play();} else {// layui-icon-pausethis.className glyphicon glyphicon-play;$player.pause();}};// 设置播放器初始属性function setInit() {// 设定音量$player.volume volume_num;$(#volume).val(volume_num * 100);// 通过同步方式获取播放列表信息$.ajaxSettings.async false;$.getJSON(/play_list, {}, function (res) {// 赋值播放列表music_list res.list;});// 设定歌曲封面$(#music_img).attr(src, /media/ music_list[0].cover);// 设定歌曲名称和歌手$(.music_name).text(music_list[0].song_name - music_list[0].singer);// 设定歌曲路径$player.src /media/ music_list[0].song_path;// 设置播放器音乐列表set_media_list(music_list)}// 监听播放器播放时间改变事件$player.addEventListener(timeupdate, function () {// 当前播放时间var currentTime $player.currentTime;// 总时间var totalTime $player.duration;// 当是数字的时候if (!isNaN(totalTime)) {// 得到播放时间与总时长的比值var rate currentTime / totalTime;// 设置时间显示// 播放时间$(.playTimeSpan).text(musicTime(currentTime));// 总时长$(.totalTimeSpan).text(/ musicTime(totalTime));// 设置进度条$(.music-progress).css(width, rate * 441 px);}});// 设置音量$(#volume).change(function () {volume_num $(this).val();$player.volume volume_num * 0.01});// 上一首$(#music_prev).click(function () {if (currentIndex 0) {currentIndex - 1;} else {// 切换到最后一首currentIndex music_list.length - 1;}// 设置播放标识为暂停$dian.className glyphicon glyphicon-play;// 播放时间$(.playTimeSpan).text(00:00);// 设置歌曲进度归零$(.music-progress).css(width, 1px);// 设置歌曲setMusic();});// 下一首$(#music_next).click(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();});// 设置播放器歌曲信息function setMusic() {// 设定歌曲封面$(#music_img).attr(src, /media/ music_list[currentIndex].cover);// 设定歌曲名称和歌手$(.music_name).text(music_list[currentIndex].song_name - music_list[currentIndex].singer);// 设定歌曲路径$player.src /media/ music_list[currentIndex].song_path;}// 歌曲时长00:00function musicTime(sens) {// 分var m parseInt(sens / 60);// 秒var s parseInt(sens % 60);// 补零m m 9 ? m : 0 m;s s 9 ? s : 0 s;return m : s;}// 设置音乐播放器列表function set_media_list(music_list) {var play_html ;for (var i 0; i music_list.length; i) {if (i) {play_html div classflex_c list_item stylepointer-events: auto; div classlist_idx (i 1) span classplaying styledisplay: none;} else {play_html div classflex_c list_item active_cur stylepointer-events: auto; div classlist_idx (i 1) span classplaying;}play_html span classside1 pause/span span classside2 pause/span span classside3 pause/span /span /div div classsong_name a href/album/song?sid music_list[i].id title music_list[i].song_name target_blank music_list[i].song_name /a /div div classartist a href/singer/detail/music_list[i].singer_id class title music_list[i].singer target_blank music_list[i].singer /a /div div classtime music_list[i].duration /div div classsong_opts flex_c i title添加歌曲 classglyphicon glyphicon-plus/inbsp;nbsp; i title收藏歌曲 classglyphicon glyphicon-heart/inbsp;nbsp; i title下载歌曲 classglyphicon glyphicon-save/inbsp;nbsp; i title删除歌曲 classglyphicon glyphicon-trash/inbsp;nbsp; /div /div;}play_title.innerHTMLspan classtext播放列表/span span classnum(共 music_list.length 首)/span;play_list.innerHTMLplay_html;console.log(play_title);}
}; 音乐播放器列表展示关闭
可通过底部播放器列表icon来打开和关闭播放列表
也可以通过播放列表中关闭icon来隐藏播放列表。
内容如下
$(#setList).click(function(){// 展示关闭音乐播放器列表var songList $(.songList);if (songList.css(display) none) {songList.show();}else{songList.hide();}
})$(.close).click(function(){// 关闭播放列表$(.songList).hide();
}); 总结
本篇主要是推荐页-排行榜功能改为动态数据及播放器功能部分实现可以播放音乐和左右切换以及查看播放音乐列表。
