javascript onended音頻事件

我得到簡單的javscript函數播放/暫停動作。不幸的是，他只能使用onclick事件。現在我還需要在播放MP3結束時更改圖標顏色。現在在結束圖標顏色停留播放音頻。當音頻暫停（淺綠色）時，我需要變回顏色。javascript onended音頻事件

的JavaScript

function aud_play_pause(object) { 
    var myAudio = object.querySelector(".xnine-player"); 
    var myIcon = object.querySelector(".control"); 
    if (myAudio.paused) { 
     myIcon.className = "control icon-pause"; 
     myAudio.play(); 
    } else if (myAudio.onend) { 
     myIcon.className = "control icon-play"; 
    } else { 
     myIcon.className = "control icon-play"; 
     myAudio.pause(); 
    } 
    }

HTML

<p> 
     <a href="javascript:void(0)" onclick="aud_play_pause(this)"> 

      <i class="control icon-play"></i> 
      <audio class="xnine-player" 
       src="http://www.noiseaddicts.com/samples_1w72b820/29.mp3" 
      preload="auto"></audio> 

     </a> - audio #1 
    </p> 

    <p> 
     <a href="javascript:void(0)" onclick="aud_play_pause(this)"> 

      <i class="control icon-play"></i> 
      <audio class="xnine-player" 
       src="http://www.noiseaddicts.com/samples_1w72b820/2235.mp3" 
      preload="auto"></audio> 

     </a> - audio #2 
    </p>

這裏是JSFIDDLE

來源

2016-12-04 X9DESIGN

您可以使用ended事件的音頻API的：

audio_element.addEventListener("ended", function() {

這裏是你應該添加到您的代碼是什麼：

document.querySelectorAll('audio').forEach(function(el) { 
    el.addEventListener("ended", function() { 
    this.parentElement.querySelector('.control').className = 'control icon-play'; 
    }, true); 
})

這是改變你的jsfiddle：
https://jsfiddle.net/71an95pa/4/

來源

2016-12-04 01:39:58 Dekel

非常感謝您！即時消息低到JavaScript。 AddEventListener對我來說是神奇的:)）作爲jsfiddle顯示效果很好。 :) – X9DESIGN

不客氣:)高興我可以幫助！ – Dekel

javascript onended音頻事件

回答

相關問題