39

ページにhtml5<audio>タグがありますが、その継続時間を知るにはどうすればよいですか?

<audio controls="">
    <source src="p4.2.mp3">
</audio>
4

8 に答える 8

17 
var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
    au.setAttribute('data-time',au.duration);
},false);
于 2015-11-25T16:07:42.907 に答える
11

上記のコメントで、解決策はイベント ハンドルをイベント ロードされたメタデータにバインドすることであると述べられました。これが私がそれをした方法です-

audio.onloadedmetadata = function() {
  alert(audio.duration);
};
于 2016-01-30T05:39:09.293 に答える
3

React コンポーネントに期間をロードするのに苦労していたので、@AlexioVay のソリューションに従って、React を使用している場合の答えを次に示します。

これは、再生/一時停止ハンドラrefの要素をターゲットにする必要があるオーディオ コンポーネント クラスに を使用していることを前提としています。audio

<audio />エレメント： 

<audio ref={audio => { this.audio = audio }} src={this.props.src} preload="auto" />

次に、あなたのcomponentDidMount()： 

componentDidMount() {

    const audio = this.audio

    audio.onloadedmetadata = () => {
        console.log(audio.duration)
        this.setState({
           duration: this.formatTime(audio.duration.toFixed(0))
        })
    }
}

そして最後にformatTime()関数:

formatTime(seconds) {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
        .filter(a => a)
        .join(':')
}

h:mm:ssこれにより、オーディオ src データが読み込まれるとすぐに、形式のデュレーションが表示されます。甘味。

于 2018-08-28T02:46:52.157 に答える
1

「canplaythrough」イベントを使用して、トラックの長さを取得しました。2 人のプレーヤーがいる場合があり、最初のプレーヤーが完了する 2 秒前に 2 番目のプレーヤーを停止したいと考えています。

$('#' + _currentPlayerID).on("canplaythrough", function (e) {   
    var seconds = e.currentTarget.duration;    
    var trackmills = seconds * 1000;
    var subTimeout = trackmills - 2000; //2 seconds before end

    //console.log('seconds ' + seconds);
    //console.log('trackmills ' + trackmills);
    //console.log('subTimeout ' + subTimeout);

    //Stop playing before the end of thet track
    //clear this event in the Pause Event
    _player2TimeoutEvent = setTimeout(function () { pausePlayer2(); }, subTimeout);

});
于 2016-02-09T17:27:02.053 に答える
0

単に使用するaudioElement.duration

于 2012-06-26T08:56:06.620 に答える
-2

こんな風にイベントを利用した方がいいのでは・・・

ObjectAudio.onprogress  =function(){
    if(this.buffered.length){
    var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
    ....
        Your code here.......
    }
}
于 2019-03-13T16:07:35.087 に答える