Django Web App Music Player не воспроизводит файлы .mp3 или показывает файлы .img

Я создаю музыкальный плеер как веб-приложение, используя Python, Django и postgres.

У меня есть несколько альбомов, с которыми я работаю и которые хранятся в базе данных.

Все мои импорты баз данных работают правильно.

Мой css скрипт работает.

Front end подключен к backend, и музыкальный плеер выглядит хорошо. В браузере каждая страница аккуратно перелистывает каждой песни в данном альбоме, отображая имя исполнителя, название альбома, название трека, номер трека. Это говорит о том, что из базы данных поступает правильная информация.

Все необходимые кнопки присутствуют, но когда я нажимаю на play, ничего не происходит, и обложка альбома не отображается. Я потратил время на устранение неполадок, но не смог отследить, где код python не соединяется правильно с кодом JS/HTML/CSS.

У меня есть одно приложение, которое работает с уровнем базы данных - скрипты импорта и т.д. Приложение musicplayer содержит остальной код.

Установка:

settings.py

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)
    audio_link = models.TextField(blank=True, null=True)

    def __str__(self):
        return self.title

musicplayer/index.html

{% load static %}

<!DOCTYPE html>
<html lang='en'>
 <head>
  <meta charset='utf-8'/>
  <title>
   Argophonica | Play Some Tunes !
  </title>
  <link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css' rel='stylesheet'/>
  <link href="{% static './style.css' %}" rel='stylesheet'/>
 </head>
 <body>

  <html>
   <head>
    <meta charset='utf-8'/>
    <title>
     Play Music!
    </title>
   </head>
   <body>
    <div class='contain'>
     <div class='container'>
      <div class='music-player'>
        {% for item in page_obj %}
       <div class='cover'>
        <img alt='' src='{{ item.image.url }}'/>
       </div>

       <div class='title'>
        <h3>
         {{ item.artist }}
        </h3>
        <h3>
         {{ item.album }}
        </h3>
        <h3>
         {{ item.track_number }}
        </h3>
        <h1>
         {{ item.title }}
        </h1>
       </div>

       <center><a href='{% if page_obj.has_previous %}?page={{ page_obj.previous_page_number }} {% endif %}'>
               <i class='fa fa-step-backward fa-2x'></i></a>'  ' <!-- this empty space puts space between track buttons -->
               <a href='{% if page_obj.has_next %}?page={{ page_obj.next_page_number }} {% endif %}'>
               <i class='fa fa-step-forward fa-2x'></i></a></center>

       <div class='reader'>
        <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>

       </div>
       {% endfor %}
      </div>
     </div>
    </div>
   </body>
  </html>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
  </script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js'>
  </script>
  <script src="{% static './script.js' %}">
  </script>

 </body>
</html>

musicplayer/style.css

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)

На данный момент база данных не нормализована должным образом (еще много над чем нужно работать!). Однако, я не думаю, что нормализация является причиной того, что mp3 не воспроизводится должным образом или изображения альбомов не отображаются.

Может ли кто-нибудь указать мне на места в коде, где нарушается связь между front-end и back-end?

Я наконец-то смог решить эту проблему, исправив способ передачи audio_file из базы данных в HTML. Я передавал файл с абсолютным именем пути, что мешало тому, как у меня настроен settings.py с urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT).

В моем скрипте импорта моя функция выглядела примерно так:

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>.

Теперь звук воспроизводится при нажатии кнопки воспроизведения.

Вернуться на верх