html5 <audio> 播放时用 javascript 设置边框颜色

Question

带有 mp3 文件的数字商店：

html5 'audio' 标签，with 'controls';作品精湛
因为有很多音频，应该在视觉上提醒用户正在播放的是哪一个——我想在正在播放的音频周围添加边框（活动）；

是django项目(python)； bootstrap 4

audio 标签不支持样式，但可以使用以下方法呈现橙色边框：'style="border-color:crimson"' 在 audio 标签中。好的，深红色的。哈哈

html5音频标签有'play'事件，应该在播放音频时触发，点击播放器上的'play'：

play 当 audio/video 已经开始或不再暂停时触发

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 Returns audio/video 是否暂停

脚本：

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

说 "i expect" 当音频标签控件（播放音频）被点击时，音频（mp3）正在播放，音频播放器周围应该有彩色边框，因为可以在音频播放器周围呈现彩色边框;

可悲的现实，这并不一定意味着缺乏智慧（笑），我正在连续解决这个问题 8 小时;显然是一个有 js 和 html5 音频标签的新手。

感谢帮助，

鞠躬,

爱nia

Answer 1

HTML 中的事件侦听器以 `on` 前缀开头

您的代码是正确的，但是，您需要使用属性 onplay 而不是 play

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

另注：

您可能希望通过 onpause="callYourFunc()" 监听 pause 事件 以在 <audio> 元素暂停时删除样式。

Answer 2

此更新有效，但不正确。我可能缺少函数循环或其他内容，代码仅适用于页面上的第一个元素。

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

进展缓慢：音频标签有两个事件，相同的函数调用：

       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>

但是，它仍然只适用于页面上的第一个音频元素。奇怪，我说。谢谢你的帮助。

html5 <audio> 播放时用 javascript 设置边框颜色

html5 <audio> set border color with javascript when playing

html

javascript

audio

border

带有 mp3 文件的数字商店：

HTML 中的事件侦听器以 on 前缀开头

另注：

HTML 中的事件侦听器以 `on` 前缀开头