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>

但是，它仍然只適用於頁面上的第一個音頻元素。 我說，很奇怪。 請求幫助。