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

Question

带mp3文件的数字商店：

• 使用html5'audio'标签，带'控件'; 工作精湛
• 因为有很多音频，用户应该在视觉上提醒哪个正在播放 - 我想要正在播放的音频边界（活动）;

它是django项目（python）; 用bootstrap 4

• 音频标签不支持样式，但可以使用：'style =“border-color：crimson”'在音频标签中呈现橙色边框。 好的，深红色。 大声笑。

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>

音频标签也有'暂停'属性：

• 暂停返回音频/视频是否暂停

脚本：

    <!-- 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音频标签的新手。

请求帮助，

弓，

s love nia

Answer 1

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

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

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

另一个说明：

您可能希望通过onpause="callYourFunc()"监听暂停事件 ，以在<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>

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