javascript - 为音频 html5 付款器添加可定制的进度条

Question

我在我的网站上使用一个非常简单的 mp3 播放器，通过 jquery 进行控制。静音/启动。

声音会自动开始，您可以通过单击文本链接来停止和重新启动它。

它工作正常，但我还想显示一个进度条，并且还希望在单击进度条时能够前进或后退。

我在网上找不到任何资源或正确的方法

这是我的 html :

<div id="player">
<span class="mute">Mute sound</span>
<audio id="background_audio" autoplay="autoplay" loop="loop">
<source src="http://rockonbones.com/wp-content/uploads/intro.mp3" type="audio/mpeg"/>
<source src="http://rockonbones.com/wp-content/uploads/intro.ogg" type="audio/ogg"/>
</audio> 
</div>

和 J ；

   var backAudio = $('#background_audio');

    var muted = false;

    $('.mute').click(function(){
        var mute = $(this);
        if (!muted) {
            $('.mute').text("play sound");
            mute.attr("disabled", "");
            backAudio.animate({volume: 0}, 1000, function () {
                muted = true;
                mute.removeAttr("disabled", "");

            });
        }
        else {
            $('.mute').text("Mute sound");
            mute.attr("disabled", "");
            backAudio.animate({volume: 1}, 1000, function () {
                muted = false;
                mute.removeAttr("disabled", "");

            });
        }
    });

我想保留我当前使用的启动/停止解决方案，只想添加进度条 有人可以帮我吗？

这是一个 jsfiddle 来查看它的实际情况:http://jsfiddle.net/X4cu9/25/

非常感谢，

Answer 1

您可以将 HTML 更改为:

<div id="player">
<span id="mute">Mute sound</span>
<audio id="background_audio" autoplay="autoplay" loop="loop">
    <source src="http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" type="audio/mpeg"/>
    <source src="http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" type="audio/ogg"/>
</audio> 
<input type="range" step="any" id="seekbar"/>
<ul id="seekbarWrapper">
    <li id="audioSeekbar" hidden=""></li>
    <li id="audioBuffered" hidden=""></li>
</ul>
<div class="AudioClock">
    <div id="time" ></div>
    <div id="totalduration"></div>
</div>

和 Js 到:

var audioElement = document.getElementById('background_audio');
audioElement.volume = 0.4;
// Turn off the default controls
audioElement.controls = false;

//Alert that the audo is ready to start playing
$('audio#background_audio').bind('canplay', function() {

});
// detect audio playing
$('audio#background_audio').bind('play', function() {
    $('#totalduration, #time').fadeIn('slow');
    $("[id*=audioPlayButtom]").addClass('isPlaying');

});
// detect audio pause
$('audio#background_audio').bind('pause', function() {
    $("#audioPlayButtom").removeClass('playPause');

});
// detect audio end
$('audio#background_audio').bind('ended', function() {
    $('#totalduration, #time').fadeOut('slow');
    $("[id*=audioPlayButtom-2]").removeClass('isPlaying');
    var nxtplay = $('.nowPlaying').next();
    nxtplay.click();
});

// var audio = audioElement.get(0);
/*play only audio or video*/
$('audio,video').bind('play', function() {
    playing = this;
    $('audio,video').each(function() {
        if (this != playing)
            this.pause();
    });
});

//HTML5 Audio - Percentage Loaded
audioElement.addEventListener('progress', function() {
    var audioBuffered = ($(this).get(0).buffered.end(0) / $(this).get(0).duration) * 100 + '%';
    // Change the width of the progress bar 

    $('#audioBuffered').css({width: audioBuffered});

});

/*play/pause*/
$("[id*='audioPlayButtom']").bind('click', function( ) {
    audioElement.paused ? audioElement.play() : audioElement.pause();
    $("[id*=audioPlayButtom-2]").toggleClass('isPlaying');
});

/* stop playing */
$("[id*=audioStop]").bind('click', function( ) {
    $("#tutorials li").removeClass("timeInfoShow");
    audioElement.pause();
    audioElement.currentTime = 0;
    $("[id*=audioPlayButtom-2]").removeClass('isPlaying');
    $('#totalduration, #time').fadeOut('slow');
});
/* min and secs  */
audioElement.addEventListener("timeupdate", function() {

    var time = document.getElementById('time'),
            currentTime = audioElement.currentTime,
            minutes = parseInt(currentTime / 60),
            seconds = parseInt(currentTime - (minutes * 60)),
            totalduration = document.getElementById('totalduration'),
            duration = audioElement.duration,
            min = parseInt(duration / 60),
            sec = parseInt(duration - (min * 60)),
            // How far through the track are we as a percentage seekbar 230px
            seekbar = (currentTime / duration) * 100 + '%';
    // Change the width of the progress bar 
    $('#audioSeekbar').css({width: seekbar});
    // seekbar input
    var seekbar = document.getElementById('seekbar');
    function setupSeekbar() {
        seekbar.min = audioElement.startTime;
        seekbar.max = audioElement.startTime + audioElement.duration;
    }
    audioElement.ondurationchange = setupSeekbar;

    function seekAudio() {
        audioElement.currentTime = seekbar.value;
    }

    function updateUI() {
        var lastBuffered = audioElement.buffered.end(audioElement.buffered.length - 1);
        seekbar.min = audioElement.startTime;
        seekbar.max = lastBuffered;
        seekbar.value = audioElement.currentTime;
    }

    seekbar.onchange = seekAudio;
    audioElement.ontimeupdate = updateUI;


    audioElement.addEventListener('durationchange', setupSeekbar);
    audioElement.addEventListener('timeupdate', updateUI);

    // If the number of minutes is less than 10, add a '0'
    if (min < 10) {
        min = '0' + min;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }
    // If the number of seconds is less than 10, add a '0'
    if (sec < 10) {
        sec = '0' + sec;
    }
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    // Display the current time
    time.innerHTML = minutes + ':' + seconds;
    // Display the time(full)
    totalduration.innerHTML = min + ':' + sec;
}, false);

/*mute song toggle*/
$('#mute').bind('click', function( ) {
    audioElement.muted = !audioElement.muted;
    $(this).toggleClass("isMute");
});
/* volume slider*/
$('#volume').change(function() {
    audioElement.volume = $(this).val() / 100;
});
$('#volume').change(function() {
    $('video')[0].volume = $(this).val() / 100;
});

/* play the prev song on the list */
$('#prevSong').bind('click', function( ) {
    var prvplay = $('.nowPlaying').prev();
    prvplay.click();
});

/* play the next song on the list */
$('#nextSong').bind('click', function( ) {
    var nxtplay = $('.nowPlaying').next();
    nxtplay.click();
});

/* reset song while playing*/

$('#reset').bind('click', function( ) {
    audioElement.currentTime = 0;
    audioElement.load();
    audioElement.play();
});

为了使用进度条，这个 js 有更多的项目要做。 示例如下:http://jsfiddle.net/X4cu9/26/