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

Posted 2023-02-24

【中文标题】html5 <audio> 播放时用javascript设置边框颜色

【英文标题】：html5 <audio> set border color with javascript when playing

【发布时间】：2019-03-23 02:50:12

【问题描述】：

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

audio标签也有'paused'属性：

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

感谢帮助，

弓，

我的爱尼亚

【参考方案1】：

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

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

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

另一个说明：

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

【讨论】：

是的，我也试过'onplay...'（'div'上方的注释行），它没有按预期工作。此外，现在的脚本应该在音频播放器周围及其父容器（测试）周围呈现边框 - 当播放音频时。感谢'onpause'提示。首先必须解决'onplay'之谜。大声笑

函数player_border 曾经运行过吗？尝试在顶部放置console.log('test') 或debugger;，看看它是否达到了该点

好的，'onplay' 确实有效，但在政治上不正确：我一整天都没有注意到，代码在页面上的第一个项目上工作，其余项目都没有受到影响。目前9个项目。并且它保持边界，因为我必须实现'onpause'。我走了。

好的，@Chistabo，如果此答案对您有帮助，请不要忘记投票和/或将其标记为答案。

大声笑，我没有足够的声誉来投票。试过了。失败的。哈哈。这个谜还没有解开。谢谢帮助。

【参考方案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 %

现在怎么办？

【参考方案3】：

进展缓慢： audio标签有两个事件，同一个函数调用：

       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>

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

【讨论】：

我尝试将 sample_play() 移动到主 .js 文件中，但它破坏了一切。恢复？是的。大声笑