互动音频进度栏html5 [英] Audio Progress Bar html5 with interaction

问题描述

嘿，我需要在html 5中创建一个简单的播放器，我要创建控制权，播放，暂停和

Hey i need creat a simple player in html 5, i create de control, play, pause,

但是我需要一个带有交互的进度条

but i need a progress bar with interation

这个例子是一个interarion条，但是我需要单击，然后转到音乐时间

this example is a interarion bar, but i need click and this move to music time

http://jsfiddle.net/LQqGS/3/

 $('.clickable').bind('click', function (ev) {
                var $div = $(ev.target);
                var $display = $div.find('.display');

                var offset = $div.offset();
                var x = ev.clientX - offset.left;

                $('.progress').width(x);
            });

            $("#pause").click(function() {
                audioElement.pause();
            });

推荐答案

您已经完成了大部分工作.您现在需要做的是更改音频播放器的 currentTime 值.这是以秒为单位的值.

You already did most of the work. What you need to do now is to change the currentTime value for your audio player. It's a value in seconds.

由于您已经具有单击的X位置，因此可以将其除以进度条的宽度，以获得应播放的歌曲的百分比.

Since you already have the X position of your click, you can divide that by the width of your progress bar to get the percentage of the song that should be played.

您具有audio元素的 duration 属性，该属性返回当前正在播放的音频文件的长度(以秒为单位).

You have the duration property for the audio element, which returns the length of the currently playing audio file, in seconds.

var duration = player.duration;
var ratio = X / progressBar.width(); 
var newCurrentTime = ratio * duration.
player.currentTime = newCurrentTime;

那只是一个简单的例子，用适当的值替换变量名.

That's just a quick example, replace the variable names with their appropriate values.

假设您的进度条正好是100px宽，并且您计算点击发生在50px处，比率为 50/100 ，所以 0.5 .将其乘以音轨的总持续时间，即可设置新的持续时间.

Let's say that your progress bar is exactly 100px wide, and that you are calculating that the click occured at 50px, the ratio would be 50/100, so 0.5. Multiply that by the total duration of the audio track, and you will get the new duration to set.

这篇关于互动音频进度栏html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！