html5 <audio> set border color with javascript when playing

Question

digital store with mp3 files:

• html5 'audio' tag is used, with 'controls'; works superb
• since there are many audios, user should be visually reminded which one is playing - i want border around audio that is playing (active);

it is django project (python); with bootstrap 4

• audio tag does not support styling, but it is possible to render orange border using: 'style="border-color:crimson"' in audio tag. ok, crimson. lol.

html5 audio tag has 'play' event, it should be triggered when audio is played, by clicking 'play' on player:

• play Fires when the audio/video has been started or is no longer paused

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>

audio tag also has 'paused' property:

• paused Returns whether the audio/video is paused or not

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>

say "i expect" when audio tag control (play audio) is clicked, and audio (mp3) is playing, there should be colored border around audio player, since it is possible to render colored border around audio player;

sad reality, which does not necessary implies a lack of intelligence (lol), is that i am solving this for 8 hours straight; obviously a newbie with js and html5 audio tag.

thx for help,

bow,

s love nia

Answer 1

Event listeners in HTML start with the on prefix

Your code is correct, however, you need to use the attribute onplay not play

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

Another note:

You may want to listen for the pause event via onpause="callYourFunc()" to remove the style when the <audio> element has paused.

Answer 2

this update works, but not correct. i might be missing a function loop, or something, code only works on first element on page.

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

thx for help, i need somebody, help, not just anybody, lol, beatles. this is the main loop (django/python) that populates items on page, it is in another file:

    {% 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 %}

what now?

Answer 3

making slow progress: audio tag has two events, same function call:

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

function sample_play() has been simplified:

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

but, still, it only works on first audio element on page. weird, i say. thx for help.