Не работает, когда несколько аудио-файлов HTML5 находятся на одной странице - PullRequest
Новая
       43

Не работает, когда несколько аудио-файлов HTML5 находятся на одной странице

0 голосов
/ 31 мая 2019

У меня есть несколько аудиоплееров HTML5, загружающих различные источники в пределах for-loop на одной странице. Аудиоплееры работают отлично и воспроизводимы, но при поиске в определенной позиции звук перезапускается. Я не могу искать вообще. Использую ли я аудиоплеер HTML5 или аудио-библиотеку, такую ​​как plyr .

После некоторой отладки я пришел к выводу, что проблема связана с наличием нескольких проигрывателей HTML5 Audio на одной странице. Seek прекрасно работает с одним аудиоплеером, но больше на странице, как я делаю в моем for-loop, ломает его. Какое лучшее решение вокруг этого?

Я использую Django 2.2, но я уверен, что это не связано с проблемой.

см. Мой код ниже - 

{% for song in songs %}
<div class="col-lg-6 col-md-12 mb-4">
  <div class="card shadow-sm">
    <div class="card-body">
      <h4 class="card-title mb-4">{{ song.title }}</h4>
      <div class="row mb-2 px-3">
        <div class="col-md-12">
          <audio id="{{ song.id }}" class="js-player" preload="auto" autobuffer controls>
            <source src="{{ song.song.url }}" type="audio/mp3" />
            <source src="{{ song.song.url }}" type="audio/ogg" />
          </audio>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <div class="float-left text-left">
        <a data-toggle="modal" data-target="#{{ song.id }}"><i class="fal fa-info-circle ml-3"></i></a>
      </div>
      <div class="float-right text-right">
        <a href="{{ song.song.url }}" download>Download <i class="fal fa-cloud-download-alt ml-3"></i></a>
      </div>
    </div>
  </div>
</div>
{% endfor %}

Я должен иметь возможность загружать различные аудиоплееры в свой for-loop и иметь возможность поиска по каждому из них.

...