HTML5 <audio>установить цвет границы с JavaScript при воспроизведении

Question

цифровой магазин с mp3-файлами:

• html5 тег 'audio' используется с элементами управления;работает превосходно
• , так как есть много аудио, пользователю следует визуально напоминать, какая из них воспроизводится - я хочу, чтобы границы вокруг воспроизводимого аудио (активны);

это проект django (python);с начальной загрузкой 4

• аудио-тег не поддерживает стилизацию, но можно отобразить оранжевую рамку, используя: 'style = "border-color: crimson"' в аудио-теге.ок, малиновыйlol.

Аудио тег html5 имеет событие воспроизведения, его следует запускать при воспроизведении звука, нажав кнопку воспроизведения на проигрывателе:

• Воспроизвестиаудио / видео было запущено или больше не приостанавливается

html:

      <div id="sample-container"
           class="col-auto my-auto">
        <!-- sample player -->

        <!-- style="border-color:crimson" -->

        <!-- onplay="player_border();" -->
        <audio id="sample-player"
               controls
               loop
               play="player_border();"
               class="btn btn-sm my-auto ">
          <source src="{{ instance.audio.url }}"
                  type="audio/mpeg">
        </audio>
      </div>

аудиотэг также имеет свойство paused:

• pausedВозвращает, если аудио / видео приостановлено или нет

script:

    <!-- scripts -->
    <script type="text/javascript">
      function player_border()
      {
        var player = document.getElementById('sample-player'); // <audio>
        var playContainer = document.getElementById('sample-container'); // <div>
        playContainer.style.borderColor = 'orange'; // ko
        player.style.borderColor = 'green'; // ko
        var isPlaying = (!player.paused);
        //document.getElementById("play_sample").play = function()
        // elem = document.getElementById('#play_sample')
        // var elem = document.getElementById('play_sample').innerHTML; # for inner text
        // var player = document.getElementById('#play_sample');
        // var play_container = document.getElementById('#play_container');
        // play_container.style.color = 'orange;'
        // play_container.style = 'border-color:orange;'
        // play_container.style.borderColor = 'color:orange;'
        // player.style.borderColor = 'color:green;'

        // if (elem.audio.play)
        // if (!elem.paused)
        // if (!elem.audio.paused)
        // if (!player.paused)
        // if (player.play)
        if (isPlaying)
        {
          playContainer.style = 'border-color:green';
          player.style.borderColor = 'orange';
          // player.style = 'borderColor:orange';
          // play_container.style = 'border-color:border-warning'
          // player.setAttribute('style', 'borderColor:orange;')
          // play_container.setAttribute('style', 'color:orange; border: 1px solid blue;')
          // elem.style = 'border:orange;'
          // elem.setAttribute('style', 'border: 1px solid orange;'
          // elem.style = 'border:border-warning'
        };
      }
    </script>

говорит «я ожидаю» при нажатии элемента управления тегом аудио (воспроизведение аудио) и аудио (mp3)), должна быть цветная рамка вокруг аудиоплеера, поскольку можно визуализировать цветную рамку вокруг аудиоплеера;

печальная реальность, которая не является необходимой, подразумевает недостаток интеллекта (смеется), еслиЯ решаю это в течение 8 часов подряд;очевидно, новичок с js и html5 audio tag.

thx за помощь,

лук,

s love nia

Answer 1

это обновление работает, но не правильно.Возможно, мне не хватает функционального цикла, или что-то в этом роде, код работает только с первым элементом на странице.

      <div id="sample-container"
           class="col-auto my-auto">
        <!-- sample player -->
        <!-- style="border-color:crimson" -->
        <!-- play="player_border();" -->
        <!-- style="background:crimson; border-radius:27px;" -->
        <audio id="sample-player"
               controls
               loop
               onplay="sample_play();"
               onpause="sample_pause()"
               class="btn btn-sm my-auto">
          <source src="{{ instance.audio.url }}"
                  type="audio/mpeg">
        </audio>
      </div>
      <div class="col-auto my-auto">
        <span class="lead ml-1 my-auto text-warning"><b>{{ instance.title }}</b></span>
      </div>
    </div>
    <!-- song description -->
    <div class="row my-auto pb-2 text-justify">
      <span class="text my-auto">{{ instance.description }}</span>
    </div>
    <!-- scripts -->
    <script type="text/javascript">
      function sample_play()
      {
        var player = document.getElementById('sample-player'); // <audio>
        var playContainer = document.getElementById('sample-container'); // <div>
        var isPlaying = (!player.paused);
        if (isPlaying)
        {
          player.style = 'background:crimson; border-radius:27px';
        };
      }

      function sample_pause()
      {
        var player = document.getElementById('sample-player'); // <audio>
        var playContainer = document.getElementById('sample-container'); // <div>
        var isPlaying = (!player.paused);
        if (!isPlaying)
        {
          player.style = 'background:none; border-radius:27px';
        }
      }
    </script>

Спасибо за помощь, мне нужен кто-то, помощь, а не кто-нибудь, лол, битлз.это основной цикл (django / python), который заполняет элементы на странице, он находится в другом файле:

    {% for obj in object_list %}
    <div class="row mx-auto my-auto bg-transparent border-bottom border-primary">
      <div class="col my-auto ">
        {% include 'products/snippets/card.html' with instance=obj %}
      </div>
    </div>
    {% endfor %}

что теперь?

Answer 2

делает медленный прогресс: Аудио тег имеет два события, один и тот же вызов функции:

       onplay="sample_play()"
       onpause="sample_play()"

Функция sample_play () была упрощена:

    <script type="text/javascript">
      function sample_play()
      {
        var player = document.getElementById('sample-player')
        if (!player.paused)
        {
          player.style = 'background:crimson; border-radius:27px'
        }
        else
        {
          player.style = 'background:none; border-radius:27px'
        }
      }
    </script>

но, тем не менее, он работает только для первого аудиоэлемента на странице. странно, говорю я. спасибо за помощь.

Answer 3

Прослушиватели событий в HTML начинаются с префикса on

Ваш код правильный, однако вам необходимо использовать атрибут onplay, а не play

<audio onplay="callYourFunc()"></audio>

Другое примечание:

Возможно, вы захотите прослушать событие pause через onpause="callYourFunc()", чтобы удалить стиль, когда элемент <audio> приостановлен.