Django实现简单的音乐播放器 2

from django.shortcuts import render


# Create your views here.

def index(request):
    """ 展示音乐播放器 """

    return render(request, 'player/index.html')

路由加载视图

引入视图，增加路由访问视图中的index方法

from django.urls import path
from . import views


urlpatterns = [
    path(r'', views.index, name='player'),
]

加载模板

把找到的音乐播放器模板和静态文件加载进入项目。

创建首页html文件

在templates/player目录下创建index.html文件，并把模板文件内容拷贝过来。

加载静态资源文件

转移模板文件中的js/css/image/mp3文件到static目录下的相应资源文件夹中

如下图：

加载静态文件

修改模板中对静态资源文件的路径，使用django中的静态资源加载方法

使用方法

模板顶部 {% load static %}

路径替换为

<link rel="stylesheet" href="{% static 'css/iconfont.css' %}">

<script src="{% static 'js/utill.js' %}"></script>

启动服务器

python manage.py runserver

加载数据表

创建表模型

在player工程目录下的models.py中创建单曲表模型。

内容如下：

from django.db import models

# Create your models here.
class Single(models.Model):
    """ 歌曲表模型 """

    title = models.CharField(max_length=20)
    singer = models.CharField(max_length=100)
    songUrl = models.CharField(max_length=180)
    imageUrl = models.CharField(max_length=180)

生成表迁移

python manage.py makemigrations

执行创建表

python manage.py migrate

插入表数据

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (1, '123木头人 - 黑Girl.mp3', ' 黑Girl', '/static/media/123木头人 - 黑Girl.mp3', '/static/images/1.png');

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (2, 'Bazzaya - 蔡妍.mp3', ' 蔡妍', '/static/media/Bazzaya - 蔡妍.mp3', '/static/images/2.png');

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (3, 'Fade - Alan Walker.mp3', ' Alan Walker', '/static/media/Fade - Alan Walker.mp3', '/static/images/3.png');

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (4, 'lemon tree[中文版] - 王若琳.mp3', ' 王若琳', '/static/media/lemon tree[中文版] - 王若琳.mp3', '/static/images/4.png');

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (5, 'Lil Mama - Jain.mp3', ' Jain', '/static/media/Lil Mama - Jain.mp3', '/static/images/5.png');

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (6, '也许是爱！- 蔡妍.mp3', ' 蔡妍', '/static/media/也许是爱！- 蔡妍.mp3', '/static/images/6.png');

注意：歌曲和歌曲图片文件已放置在static相应资源文件夹中，不在单独说明。

播放歌曲列表

视图

视图请求数据模型获取所有歌曲信息列表，并返回json格式

def media_list(request):
    """ MP3音乐列表 """

    mediaList = Single.objects.all()

    arr = []
    for item in mediaList:
        arr.append({
            'id': item.id,
            'title': item.title,
            'singer': item.singer,
            'songUrl': item.songUrl,
            'imageUrl': item.imageUrl,
        })

    return JsonResponse({'list': arr})

路由设置

增加列表路由设置

path(r'media_list', views.media_list, name='media_list'),

请求歌曲列表

把player.js歌曲类中固定的歌曲列表改为通过路由获取视图的数据，还是通过构造函数调用。

// 获取歌曲列表
getSongs() {
    let mp3list = [{
        id: 1,
        title: '! (也许是爱！) - 蔡妍',
        singer: '蔡妍',
        songUrl: '/static/media/! (也许是爱！) - 蔡妍.mp3',
        imageUrl: '/static/images/1.png'
    }]

    $.getJSON('/media_list', {}, function(data, msg) {
        let res = data.list
        for (let i=0; i<res.length; i++) {
            mp3list[i] = {
                id:res[i].id,
                title:res[i].title,
                singer:res[i].singer,
                songUrl:res[i].songUrl,
                imageUrl:res[i].imageUrl
            }
        }
    })
    this.songs = mp3list
}

总结

本篇主要加载静态模板并改为动态数据，已经是一个简单的音乐播放器了，可以播放和切换歌曲，只是新添加歌曲需要自己手动添加数据表和媒体文件。