技術標籤：Pythondjangohtml5

文章目錄

• • 原始碼和文件
  • 準備工作
  • 修改配置
  • 模型與檢視
  • 管理後臺
  • 編寫模板
  • 收尾
  • 注意事項
  • 可優化內容

原始碼和文件

Github地址
APlayer文件

準備工作

預設你已擁有Django基礎知識，並且裝置中安裝了python和Django環境，會使用pip包管理工具

#安裝Django
pip install django
#建立專案和app
django-admin startproject myproject
cd myproject
python manage.py startapp myplayer
#建立超級使用者
python manage.
 
py createsuperuser
#如果報錯先遷移一下資料庫
python manage.py makemigrations
python manage.py migrate

修改配置

myproject/urls.py

from django.contrib import admin
from django.urls import path
from myplayer.views import AplayerView
urlpatterns = [
    path('admin/', admin.site.urls),
    path('myplayer/',AplayerView.as_view(
 
))
]

myproject/settings.py

import os
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #---------修改內容-----------
    'myplayer',
]
...
TEMPLATES =
 
 [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        #-------修改內容--------
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
...
#新增內容
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)

模型與檢視

myplayer/models.py

from django.db import models
from django.utils.timezone import now
class Music(models.Model):
    id = models.AutoField(primary_key=True)
    created_time = models.DateTimeField('建立時間', default=now)
    music_name = models.CharField(verbose_name='歌曲',max_length=100)
    artist = models.CharField(verbose_name='歌手',max_length=40)
    music_url = models.CharField(verbose_name='播放連結',max_length=200)
    image_url = models.CharField(verbose_name='圖片連結',max_length=200,blank=True)
    lrc = models.TextField(verbose_name='歌詞',blank=True)
    status = models.BooleanField(verbose_name='是否啟用',default=True)
    peace_music = models.BooleanField(verbose_name='純音樂',default=False)

    class Meta:
        verbose_name = '音樂'
        verbose_name_plural = verbose_name

    def save(self,*args,**kwargs):
        if not self.lrc and not self.peace_music:
            self.lrc = '[00:00.000] 暫無歌詞\\n[00:01.000] 暫無歌詞\\n[00:02.000] 暫無歌詞\\n'
        elif not self.lrc and self.peace_music:
            self.lrc = '[00:00.000] 純音樂，請欣賞\\n[00:01.000] 純音樂，請欣賞\\n[00:02.000] 純音樂，請欣賞\\n'
        super(Music,self).save(*args,**kwargs)


    def __str__(self):
        return self.music_name + "-" + self.artist

myplayer/views.py

from django.shortcuts import render
from django.views import View
from myplayer.models import Music
class AplayerView(View):
    def get(self,request,*args,**kwargs):
        musics = []
        for i in Music.objects.filter(status=True):
            musics.append({
                'name':i.music_name,
                'artist':i.artist,
                'url':i.music_url,
                'cover':i.image_url,
                'lrc':i.lrc,
            })
        context = {'musics':str(musics)[1:-1].replace('}, ','}*#')}
        return render(request,'APlayer/myplayer.html',context=context)

管理後臺

myplayer/admin.py

from django.contrib import admin
from .models import Music
from django.utils.html import format_html

# Register your models here.

class MusicAdmin(admin.ModelAdmin):
    exclude = ('created_time',)
    list_display = ('id','music_name','artist','created_time','image_link','audio_link','status','peace_music')
    list_display_links = ('id','music_name')
    list_filter = ['artist','created_time','status','peace_music']

    def image_link(self, obj):
        return format_html('<a href="%s" target="_blank">%s</a>' % (obj.image_url, '檢視'))
    image_link.short_description = '專輯圖片'

    def audio_link(self, obj):
        return format_html('<a href="%s" target="_blank">%s</a>' % (obj.music_url, '播放'))
    audio_link.short_description = '音樂外鏈'

admin.site.register(Music,MusicAdmin)

編寫模板

在此之前需要引入靜態檔案，APlayer.min.js和APlayer.min.css
在專案根目錄下新建static和templates資料夾，在兩個資料夾下分別新建APlayer目錄
將Github倉庫的dist目錄下的四個檔案儲存到static/APlayer目錄中
新建templates/APlayer/myplayer.html:

<!DOCTYPE html>
{% load static%}
<html>
<head>
    <meta charset="UTF-8">
    <title>myplayer</title>
    <link rel="stylesheet" href="{% static 'APlayer/APlayer.min.css' %}">
</head>
<script src="{% static 'APlayer/APlayer.min.js' %}"></script>
<body>
    <div id="aplayer" style="width:600px;"></div>
<script>
function music_list(musics) {
    var a = [];
    var p;
    for(i=0;i<musics.length;i++){
        p = JSON.parse(musics[i].replaceAll("'","\""));
        a[i] = {
            name:p['name'],
            artist:p['artist'],
            url:p['url'],
            cover:p['cover'],
            lrc:p['lrc']
            };
        };
    return a;
    };
new APlayer({
    container: document.getElementById('aplayer'),
    loop: 'all',
    theme: '#F57F17',
    lrcType: 1,
    listFolded: false,
    audio: music_list('{{ musics }}'.replaceAll('&#x27;',"'").split('*#'))
});
</script>
</body>
</html>

收尾

#遷移資料庫
python manage.py makemigrations
python manage.py migrate
#啟動服務
python manage.py runserver

訪問127.0.0.1:8000/admin在後臺新增音樂
訪問127.0.0.0:8000/myplayer/即可看到播放器
更多配置請參考APlayer中文文件

注意事項

自己在配置的時候踩了兩個坑，把解決辦法放在這裡，方便各位可愛的讀者
1：列表高度
當有多首音樂時，會自動渲染為一個播放列表，隨著音樂增多列表高度也會發生變化，這不符合我們的期望
官方文件中提到listMaxHeight引數可以自定義列表高度，該引數的預設值為250。一首歌的高度大概是33px，如果你想顯示十首音樂，建議設定為330
設定完成後你會發現然並軟，列表會無限度的變高，連預設值都失效了，經過多番嘗試，發現導致該問題的是模板檔案中的<!DOCTYPE html>，刪掉這一行設定就生效了。
在生產環境中，也許你的模板會繼承自別的html檔案，為了解決該問題，你可以在extends語句之前加上<!DOCTYPE>，捨棄後面的html
2：歌詞
歌詞的引入方式有三種，詳見官方文件，本文中採用的方式是在js中引入。在測試過程中我添加了一首純音樂，因為沒有歌詞，所以在迴圈過程中引起函式錯誤，嘗試新增“暫無歌詞”欄位後異常仍然存在，不死心的我看了一下官方文件，發現歌詞是三句一組的，所以，將歌詞改成如下形式：
[00:00.000] 純音樂，請欣賞\n[00:01.000] 純音樂，請欣賞\n[00:02.000] 純音樂，請欣賞\n
這一次OK了，迴圈過程不再因異常而中止。在本文的程式碼中，我重寫了save方法，以便應對沒有歌詞的情況。如果暫時沒有歌詞，把歌詞部分留空即可，如果是純音樂，還需要勾選“是否純音樂”前面的選擇框 ，當然，不勾選也沒有問題，隨你喜好~

可優化內容

目前從檢視向模板傳遞資料採用的是字串，用js程式碼來處理，這種方法不盡如人意，可選的方法是以json格式傳遞資料，當然，仍然需要一段js程式碼將其渲染為列表
可以在models.py中寫一個方法，判斷音樂外鏈是否可用，在音樂很多時，該方法將會為你提供極大的便利