audio标签

最新推荐文章于 2025-06-04 20:00:00 发布

Mode Cheng

最新推荐文章于 2025-06-04 20:00:00 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML标签

本文链接：https://blog.youkuaiyun.com/weixin_43885080/article/details/88883521

HTML标签专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的音视频控制脚本，包括播放、暂停、停止、加速、重复等功能，并实现了音量控制及时间轴显示，通过点击事件调整播放进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性	作用
play()	播放
pause()	暂停
currentTime	时间轴

	var btn = document.getElementsByTagName('span');
    var audio = new Audio("audio/whatchYourSee.m4a");
    var divs = document.getElementsByTagName('div');
    //时间轴
    audio.addEventListener("timeupdate", show, true);

    function show() {
        divs[2].style.width = ((audio.currentTime / audio.duration) * 100) + "%";
    }

    //播放
    btn[0].onclick = function () {
        audio.play();
    };
    //暂停
    btn[1].onclick = function () {
        audio.pause();
    };
    //停止
    btn[2].onclick = function () {
        audio.currentTime = 0;
        audio.pause();
    };
    //加速
    btn[3].onclick = function () {
        audio.currentTime += 5;
    };
    //重复
    btn[4].onclick = function () {
        audio.currentTime = 0;
        audio.play();
    };
    //音量
    audio.volume = 0.5;

    //点击滚动条
    function sd(e) {
        console.log();
        audio.currentTime = audio.duration * (e.offsetX / 500);
        divs[2].style.width = ((audio.currentTime / audio.duration) * 100) + "%";
    }