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

Question

带有 mp3 文件的数字商店：

• 使用 html5 'audio' 标签，带有 'controls'；工作出色
• 由于有很多音频，应该在视觉上提醒用户正在播放哪个音频 - 我想要正在播放的音频周围的边框（活动）；

它是 django 项目（python）；带引导程序 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>

音频标签还具有“暂停”属性：

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

谢谢帮助，

弓，

我的爱尼亚

标签： javascripthtmlaudioborder

Answer 1

onHTML 中的事件监听器以前缀开头

您的代码是正确的，但是，您需要使用属性onplaynotplay

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

另一个注意事项：

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