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

Question

带有 mp3 文件的数字商店:

使用 html5 'audio' 标签，带有 'controls'；作品精湛

由于有很多音频，应该在视觉上提醒用户正在播放哪个音频 - 我想要正在播放的音频周围的边框(事件)；

它是 django 项目(python)；带 Bootstrap 4

音频标签不支持样式，但可以在音频标签中使用:'style="border-color:crimson"' 渲染橙色边框。
好吧，绯红哈哈。

html5 音频标签有“播放”事件，它应该在播放音频时触发，通过点击播放器上的“播放”:

play 当音频/视频已启动或不再暂停时触发

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 返回音频/视频是否暂停

脚本:

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

谢谢帮助，

弓，

我的爱尼亚

Answer 1

HTML 中的事件监听器以 on 开头字首

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

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

另一个注意事项:

您可能想收听 暂停事件 通过 onpause="callYourFunc()"删除 <audio> 时的样式元素已暂停。