如何用JS获取audio标签的已播放时长并控制进度条的width
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用JS获取audio标签的已播放时长并控制进度条的width相关的知识，希望对你有一定的参考价值。
我在写一个网页MP3播放器，没有使用audio标签的控制条而是用css写了一个，但是在通过进度条显示并控制播放进度的时候出了点问题，我想通过修改CSS中的width值来控制进度条的进度，请问该如何写JS？图片中那个进度条的id是view，上面的白块id是number
<audio id="audio" controls>。
<source src="horse.ogg" type="audio/ogg">。
<source src="horse.mp3" type="audio/mpeg">。
您的浏览器不支持 audio 元素。
</audio>。
<script>。
var audio=document.getElementById("audio")。
audio.duration//播放时间。
audio.currentTime//播放进度。
</script>。
udio是英文单词，有多种含义:Audio是AU格式一种经过压缩的数字声音格式的详写;Audio是音频的单词;Audio是听觉的单词。听觉声波作用于听觉器官，使其感受细胞兴奋并引起听神经的冲动发放传入信息，经各级听觉中枢分析后引起的感觉。
参考技术A <audio id="audio" controls><source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<script>
var audio=document.getElementById("audio");
audio.duration//播放时间
audio.currentTime//播放进度
</script>追问
请勿抄袭复制
原生js控制audio标签播放暂停重新加载
audio不仅是一个标签，也是window下的一个对象，作为对象，具有一些对象属性和对象方法：
对象属性：
currentTime：获取当前播放时间
duration：获取歌曲的总时间
pause：是否暂停，返回布尔值
对象方法：
play()：播放
pause()：暂停
load()：重新加载
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>audio播放暂停重新播放</title>
</head>
<body>
<audio
src="https://ip-h5-nf01-sycdn.kuwo.cn/08fc62da0d838431d2c6135ddd66c5ae/5e1bdce5/resource/n2/97/38/2347707388.mp3"
controls preload id="music1">
</audio>
<button id="bf" onclick="bf();">播放</button>
<button onclick="rbf();">重新播放</button>
<script>
function rbf() {
var audio = document.getElementById(‘music1‘);
var bf=document.getElementById("bf");
audio.currentTime = 0;
audio.play();
bf.innerText="暂停";
}
function bf() {
var audio = document.getElementById(‘music1‘);
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
bf.innerText="暂停";
} else {
audio.pause(); // 这个就是暂停
bf.innerText="播放";
}
}
}
</script>
</body>
</html>
以上是关于如何用JS获取audio标签的已播放时长并控制进度条的width的主要内容，如果未能解决你的问题，请参考以下文章