关闭

html5,定制<audio>需注意的事项

标签: html5audio定制自己的audio
127人阅读 评论(0) 收藏 举报

现在我写的这个,不能拖动进度条,不能切换上下的audio


1.播放按钮的变化,2个播放/暂停的图片。

$('.audio-pic').click(function () {
    $(this).toggleClass(function () {
        if ($(this).hasClass("start")) {
            return "pause"
        } else {
            return "start"
        }
    });
})


2.进度条

一个是总的进度条,放在最下面。

一个是当前进度条,覆盖在总进度上面。

一个是当前进度的位置,可以理解为上面的一个小块,放在当前进度条的右边(可有可无)


3.动态进度条

currentTime:设置或返回音频/视频中的当前播放位置(以秒计)

duration:返回当前音频/视频的长度(以秒计)


4.paly pause 两个事件切换

if (audio.paused) {
    audio.play();
} else {
    audio.pause()
    clearInterval(aaa);
}


5.计算时长,监听音频加载完成的状态

durationchange:当音频/视频的时长已更改时

$audio.on('durationchange', function () {
    //音频加载完成后,计算总时长
    if (totalTime < 60) {
        $('.audio-time.total').html("00:" + Math.ceil(totalTime))
    } else {
        seconds = Math.ceil(totalTime % 60);
        minutes = Math.ceil(totalTime / 60);
        $('.audio-time.total').html(minutes + ":" + seconds)
    }
})

6.音频播放完成后,要做的变化

播放按钮的图片切换

进度条和进度指示块的变化

currentTime重置为0

返回当前音频/视频的长度(以秒计)
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16695次
    • 积分:171
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:2篇
    • 译文:0篇
    • 评论:1条