使用Python Django框架做一个音乐网站，
本篇主要为排行榜功能及音乐播放器部分功能实现。
目录
排行榜列表
设置路由
视图处理
模板渲染
设置跳转入口
播放器功能开发
设置路由
模板页面
脚本渲染
列表渲染和播放器实现
音乐播放器列表展示关闭
总结
排行榜列表 设置路由 在子应用文件夹中urls.py中新增一条记录。
# 排行榜
path('rank', views.rank, name='rank'),
视图处理 榜单列表需要展示各个排行榜所有一定时间段中上榜单曲列表；
因为前期单曲没有与类型表关联，目前就只能做一个类似的功能。
下方代码中处理了分页查询；通过id来区别类型进行排序；
设置了榜单的名称，更新时间是取单曲列表中时间最晚的一个时间。
def rank(request):
""" 排行榜 """
id = int(request.GET.get('id', 1))
page = int(request.GET.get('page', 1))
singe_db = Singe.objects
if 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 = '会员畅听榜'
# 实例化Paginator
page_num = 20
paginator = 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.updatetime
return render(request, 'rank/index.html', locals())
模板渲染 在templates文件夹下创建rank文件夹，并在其中创建index.html文件。
其他渲染都大同小异，主要有一点新的东西，因为榜单数据比较多，在第一页时候有个前三名标识，需要区别处理第二页之后的序列号和相应标识处理，这里使用了模板中的过滤器。
内容如下：
{% extends 'common/base.html' %}
{% load static %}
{% block title %}我的音乐{% endblock title %}
{% block content %}
{{rank_name}} 更新时间：{{updatetime}}
立即播放
添加
收藏
{% if list_num < 1 %}
{% endif %}
{% if list_num > 0 %}
{% for index in res.paginator.page_range %}
{% if res.number == index %}
{{index}} {{index}}
{% endif %}
{% endblock content %}
设置跳转入口 点击推荐排行榜中更多按钮，进入排行榜列表。
内容如下：
播放器功能开发 其他功能大致算完成了，开始做播放音乐的功能开发。
播放器设置在网站的底部，采用固定悬浮；
可以左右切换音乐，设置音量，查看播放音乐列表。
设置路由 主要用来获取播放器音乐列表信息。
# 播放器列表
path('play_list', views.play_list, name='play_list'),
模板页面 播放器的主要功能采用之前使用html做的播放器，
直接嵌入到django音乐网站基类模板（templates/common/base.html）的底部。
内容如下：
效果：
脚本渲染 使用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-pause
this.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:00）
function 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 += '' +
'
' + (i + 1) + '' +
'
';
} else {
play_html += '' +
'
' + (i + 1) + '' +
'';
}
play_html += ' ' +
'
' +
'
' +
'
' +
'
' + music_list[i].duration + '
' +
'
' +
'
' +
'
播放列表 (共'+ music_list.length +'首) ';
play_list.innerHTML=play_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();
});
总结
本篇主要是推荐页-排行榜功能改为动态数据及播放器功能部分实现，可以播放音乐和左右切换以及查看播放音乐列表。
