js获取audio进度调播放状态播放时间，详细

最新推荐文章于 2024-11-12 09:54:37 发布

琼花霰

最新推荐文章于 2024-11-12 09:54:37 发布

阅读量2w

点赞数 13

文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_47703624/article/details/107556369

版权

在html中书写的audio

<body>
        <div id="song">
            <h4>音乐</h4>
            <audio src="音频连接.mp3" type="audio/mp3" controls="controls" ontimeupdate="updata()"></audio>
        </div>
</body>

其中：src是音频的路径，type是音频格式，controls播放控件，ontimeupdate：是进度更新事件；

MDN->audio 属性
- src 歌曲的路径
- preload 是否在页面加载后立即加载（设置 autoplay 后无效）
- controls 显示 audio 自带的播放控件
- loop 音频循环
- autoplay 音频加载后自动播放
- currentTime 音频当前播放时间
- duration 音频总长度
- ended 音频是否结束
- muted 音频静音为 true
- volume 当前音频音量
- readyState 音频当前的就绪状态
MDN->audio 事件
- abort 当音频/视频的加载已放弃时
- canplay 当浏览器可以播放音频/视频时
- canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
- durationchange 当音频/视频的时长已更改时
- emptied 当目前的播放列表为空时
- ended 当目前的播放列表已结束时
- error 当在音频/视频加载期间发生错误时
- loadeddata 当浏览器已加载音频/视频的当前帧时
- loadedmetadata 当浏览器已加载音频/视频的元数据时
- loadstart 当浏览器开始查找音频/视频时
- pause 当音频/视频已暂停时
- play 当音频/视频已开始或不再暂停时
- playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
- progress 当浏览器正在下载音频/视频时
- ratechange 当音频/视频的播放速度已更改时
- seeked 当用户已移动/跳跃到音频/视频中的新位置时
- seeking 当用户开始移动/跳跃到音频/视频中的新位置时
- stalled 当浏览器尝试获取媒体数据，但数据不可用时
- suspend 当浏览器刻意不获取媒体数据时
- timeupdate 当目前的播放位置已更改时
- volumechange 当音量已更改时
- waiting 当视频由于需要缓冲下一帧而停止

其他属性可自行尝试。

下面是在JS中的代码

<script>
function updata() {
                console.log("播放");
                var audio = document.querySelector("audio");
                audio.duration;//获取总播放时间
                audio.currentTime;//获取播放进度
                console.log(audio.currentTime);//控制台显示
            }
</script>