HTML5オーディオで 'stop'イベントを捕捉して何かをするには？

私は初心者でHTML5で、JSでは真ん中ではありませんが、<audio>とsmthを正しく使用する方法を見つけようとしています。この質問を受け取りました...私のhtml：HTML5オーディオで 'stop'イベントを捕捉して何かをするには？

今

<i class='some_icon' onclick='play();'> 
    <audio src='some_mp3.mp3' id='player'></audio> 
</i>

私は、これはJS書いたので、私は、私はいくつかのmp3ファイル再生をしたいし、それが動作アイコンをクリックしてください：

function play() { 
    var my = document.getElementById('player'); 
    if (my.paused) { 
     my.play(); 
    } else { 
     my.pause(); 
     my.currentTime = 0 
    } 
    }

しかし、以外にも、私はmp3ファイルが終了したときに、私のアイコンを変更したいです... 。どうやってやるの？すべてのヘルプは大歓迎されます:)ここで

出典

2016-05-11 impregnable fiend

（サウンドクリップはわずか4秒の長さですか）？ –

@Mikeええ、原因は終了しました、私のenglにごめんなさい –

[HTML5の動的要素のオーディオ要素]の複製が可能です。（http://stackoverflow.com/questions/14190160/html5-audio-element-with-dynamic-source） – Reinard

は、あなたのオーディオ（またはビデオ）が終了したときに、いくつかのコードをトリガーするためのコードです：

var my = document.getElementById('player'); 

my.addEventListener("ended", function(e){ 
    // here goes your code to change the icon 
}, false);

出典

2016-05-11 14:31:17

良いこと、それは動作します！ Thx男、今までdunno datメソッド... –

あなたを助けてうれしい:) –

私はこれが昨日受け入れ/答えが、私はちょうど私が」と考えられていた知っていますdは将来のユーザーの利益のためにコードの完全な作業ビットを共有します。停止し、あなたが意味終わったことで

function play() { 
 
    var my = document.getElementById('player'); 
 
    my.currentTime = 0; 
 
    /**this one loops***/ 
 
    if ($('.btn').find('span i').hasClass('fa-stop')) { 
 
    $('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle'); 
 
    $('.texto').text("Play"); 
 
    } 
 
    if (my.paused) { 
 
    my.play(); 
 
    } else { 
 
    my.pause(); 
 
    my.currentTime = 0; 
 
    } 
 
    my.addEventListener("ended", function(e) { 
 
    $('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop'); 
 
    $('.texto').text("Stop"); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Audio Icon Toggle</title> 
 
</head> 
 

 
<body> 
 
    <div id="music"> 
 
    <h2>Audio Icon Toggle</h2> 
 
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();"><span><i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;&nbsp;<span class="texto">Play</span></span> 
 
     <audio src="http://www.rachelgallen.com/monkey.mp3" id="player" class="collapse"></audio> 
 
    </button> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-12 18:01:37

HTML5オーディオで 'stop'イベントを捕捉して何かをするには？

答えて

関連する問題