Django implements a simple music player 2

from django.shortcuts import render


# Create your views here.

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

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

route loading view

Introduce the view and add the index method in the routing access view

from django.urls import path
from . import views


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

load template

Load the found music player template and static files into the project.

Create home page html file

Create an index.html file in the templates/player directory, and copy the contents of the template file.

Load static resource files

Transfer the js/css/image/mp3 files in the template file to the corresponding resource folder in the static directory

As shown below:

load static files

Modify the path to the static resource file in the template and use the static resource loading method in django

Instructions

template top {% load static %}

path replaced with

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

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

start server

python manage.py runserver

load data table

Create table model

Create a single table model in models.py under the player project directory.

The content is as follows:

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)

generate table migration

python manage.py makemigrations

Execute create table

python manage.py migrate

insert table data

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');

Note: The songs and song picture files have been placed in the corresponding static resource folders, and will not be described separately.

play song list

view

The view requests the data model to obtain a list of all song information and returns it in json format

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})

routing settings

Add list routing settings

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

request song list

Change the fixed song list in the player.js song class to get the data of the view through the route, or call it through the constructor.

// 获取歌曲列表
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
}

Summarize

This article mainly loads static templates and changes them to dynamic data. It is already a simple music player that can play and switch songs, but you need to manually add data tables and media files to add new songs.