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

在html中书写的audio

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

其中：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>

下面是效果图，控制台上会显示获取的播放进度时间

参考链接：https://www.cnblogs.com/mybilibili/p/10376528.html