web-dev-qa-db-ja.com

html5ディスプレイオーディオcurrentTime

Html 5オーディオ要素の現在の時間とその要素の継続時間を表示したいと思います。私はインターネットを見ていましたが、音声ファイルの長さと現在の時刻を表示できる機能的なスクリプトが見つかりません。 1:35/3:20。

誰もアイデアを持っています:)？

javascripthtml5audiodurationhtml5-audio
27
Lenny Magico

ここに簡単な使用法があります。 html5要素はまだ開発中であるため、何でも変更できます。

    audio = document.getElementsByTagName("audio")[0];

    //functions
    audio.load();
    audio.play();
    audio.pause();

    //properties
    audio.currentSrc  
    audio.currentTime  
    audio.duration

ここにリファレンスがあります HTML5 Audio

オーディオの再生中にcurrentTimeを取得するには、timeupdateイベントをアタッチし、コールバック関数内で現在の時刻を更新する必要があります。

dev.operaの簡単なチュートリアルオーディオ/ビデオhtml5

28
KJYe.Name

Audio.duration（）を使用する場合。数秒で結果が得られます。これを数分と数秒で変更するだけです。コードのデモはこちらです。お役に立てば幸いです。

song.addEventListener('timeupdate',function (){

    var duration = song.duration; //song is object of audio.  song= new Audio();

    var sec= new Number();
    var min= new Number();
     sec = Math.floor( duration );    
     min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;

    $("#total_duration").html(min + ":"+ sec);   //Id where i have to print the total duration of song.

    });

このコードは確実に全期間にわたって機能します。現在の時刻を取得するには、song.currentTime; 代わりに song.duration;コード全体は同じままです。

4
Anuj Sharma

ES6

       const audio = new Audio();
       audio.src = document.querySelector('#audio').src;
       audio.play();
       audio.addEventListener('timeupdate', (event) => {
            const currentTime = Math.floor(audio.currentTime);
            const duration = Math.floor(audio.duration);
        }, false);
3
Israt Jahan Simu

あなたのjqueryでtimeupdateを実装しようとしている人のために。

<audio id="myAudio">
    <source src='test.mp3' type="audio/mp3" />
</audio>

$("audio#myAudio").get(0).addEventListener("timeupdate",function(){
        // do your stuff here
    });
3
yourkishore

オーディオファイルの長さを見つけるのは簡単です！：

<html>
<head>
</head>
<body>
    <audio controls="" id="audio">
        <source src="audio.mp3">
    </audio>
    <button id="button">
    <p id="p"></p>
        GET LENGTH OF AUDIO
    </button>
<script>
    var MYAUDIO = document.getElementById(audio);
    var MYBUTTON = document.getElementById(button);
    var PARA = document.getElementById(p);
    function getAudioLength() {
        PARA.innerHTML = duration.MYAUDIO
    }
MYBUTTON.addEventListener(click, getAudioLength);
</script>
</body>
</html>
0
Smit Shilpatul

TypeScriptの場合：

formatTime(seconds: number): string {

    let minutes: any = Math.floor(seconds / 60);
    let secs: any = Math.floor(seconds % 60);

    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    if (secs < 10) {
        secs = '0' + secs;
    }

    return minutes +  ':' + secs;
}

マジックナンバーを定数に置き換えることを忘れないでください。一例です。

0
Ivan Lencina