Django音乐播放器:models.当播放按钮被按下时，FileField没有正确地将音频文件传递给HTML

我正在使用Python, Django和postgres构建一个音乐播放器作为web应用程序。

相册本地存储在/media中。专辑信息存储在postgres数据库中。

我有一个应用程序，处理数据库层-导入脚本等。音乐播放器应用程序包含其余的代码。

我所有的数据库导入工作和连接到HTML/CSS/JS。当在浏览器中，每个页面精确地翻页给定专辑中的每首歌曲，显示艺人姓名、专辑标题、曲目标题、曲目编号时，就可以证明这一点。

媒体按钮(播放，后退，前进)是存在的，但当我点击播放按钮没有音频播放。

我花了很多时间来解决这个问题，通过改变我的Django模型，HTML, JavaScript和CSS代码，以及Python Django Paginator代码，但一直没有成功地理解Python代码没有正确连接到JS/HTML/CSS代码。

不管Tracks audio_file字段是否传递了"upload_to"参数,音频仍未去玩。

设置:

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.abspath(os.path.dirname(__file__))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(PROJECT_DIR, 'static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

urls . py

from django.urls import path, include
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib.staticfiles.urls import static
urlpatterns = [
path('admin/', admin.site.urls),
path('homepage/', include('homepage.urls')),
path('about_us/', include('about_us.urls')),
path('musicplayer/', include('musicplayer.urls')),
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

models.py


class Artist(models.Model):
artist = models.TextField(blank=False, null=False, unique=True)
albums = models.TextField(blank=True, null=True)
def __str__(self):
return self.artist

class Album(models.Model):
title = models.TextField(blank=False, null=False)
artist = models.ForeignKey(Artist, on_delete=models.CASCADE)
release_date = models.TextField(blank=True, null=True)
genre = models.TextField(blank=True, null=True)
number_tracks = models.TextField(blank=True, null=True)
track_list = models.TextField(blank=True, null=True)
length = models.TextField(blank=True, null=True)
file_type = models.TextField(blank=True, null=True)
artwork_file = models.ImageField(blank=True, null=True)
artwork_link = models.TextField(blank=True, null=True)
notes = models.TextField(blank=True, null=True)
def __str__(self):
return self.title

class Track(models.Model):
title = models.TextField(blank=False, null=False)
album = models.ForeignKey(Album, on_delete=models.CASCADE)
artist = models.TextField(blank=True, null=True)
length = models.TextField(blank=True, null=True)
track_number = models.TextField(blank=True, null=True)
audio_file = models.FileField(blank=True, null=True, max_length=500, upload_to='media/')
audio_link = models.TextField(blank=True, null=True)
def __str__(self):
return self.title

相关部分:musicplayer/style.css


.reader {
width: 100%;
display: block;
height: auto;
position: relative;
float: left;
}

musicplayer/script.js

var audio = {
init: function() {
var $that = this;
$(function() {
$that.components.media();
});
},
components: {
media: function(target) {
var media = $('audio.fc-media', (target !== undefined) ? target : 'body');
if (media.length) {
media.mediaelementplayer({
audioHeight: 40,
features : ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
alwaysShowControls      : true,
timeAndDurationSeparator: '<span></span>',
iPadUseNativeControls: true,
iPhoneUseNativeControls: true,
AndroidUseNativeControls: true
}); } }, }, };
audio.init();

musicplayer/views.py

from django.core.paginator import Paginator
from datasource.models import Track
def index(request):
paginator = Paginator(Track.objects.order_by('album', 'track_number').all(), 1)
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
context = {'page_obj': page_obj}
return render(request, 'index.html', context)

我无法辨别哪位代码需要工作上有音频文件播放时，用户单击播放按钮。有没有人能告诉我代码中前端和后端之间的连接中断的地方?

我终于能够通过修复我将audio_file从数据库传递到HTML的方式来解决这个问题。我一直在传递一个具有绝对路径名的文件，这扰乱了我用urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)设置settings.py的方式。

在我的导入脚本中，我的函数最终看起来像这样:

def get_audio(path_string):
os.chdir(path_string[0])

for file in glob.glob('*.mp3'):
relative_path = str(path_string[0]).split('media/')
audio_file = os.path.join(relative_path[1], file)
return audio_file

在index.html中使用代码正确地传递文件:<audio class='fc-media' style='width: 100%;'> <source src='{% if item.audio_file %} {{ item.audio_file.url }} {% else %} {{ item.audio_link }} {% endif %}' type='audio/mp3'/> </audio>.

当播放按钮被按下时，音频现在播放。

相关内容

最新更新

热门标签：