我已经阅读并使用了很多解决方案，包括“canplay”或oncanplay。但每次我尝试拖动进度条中的滑块并设置当前时间时，当前时间将始终为 0
这是我的代码，我真的希望有人能就这个主题启发我。
请注意，该文件是 .blade.php 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Audio Player with jQuery</title>
</head>
<body>
<p>HELLO</p>
<h1>Simple Audio Player with jQuery</h1>
<audio id="audio" controls>
<source src="{{ asset('v2/music/rain.mp3') }}" type="audio/mpeg" preload="auto">
Your browser does not support the audio element.
</audio>
<div id="progress-container">
<input type="range" id="progress" min="0" max="100" value="0">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get references to the audio element and progress bar
var audio = document.getElementById('audio');
var progress = document.getElementById('progress');
var isSeeking = false; // Add a flag to track seeking
// Add an event listener to update the progress bar as the audio plays
audio.addEventListener('timeupdate', function() {
var currentTime = audio.currentTime;
var duration = audio.duration;
var progressValue = (currentTime / duration) * 100;
progress.value = progressValue;
});
// Add an event listener to seek when the progress bar is changed
progress.addEventListener('change', function() {
var progressValue = progress.value;
var duration = audio.duration;
console.log(progressValue);
console.log(duration);
var newTime = (progressValue / 100) * duration;
audio.currentTime = newTime;
});
});
</script>
</body>
</html>
duration和currentTime这两个控制台日志值如下
1 @ 线路首页：43
157.8267 @line home:44
88@线路首页：43
157.8267 @line home:44
请参阅下面的工作演示。您的音频文件可能未加载到音频标签中。您尝试过不同的音频文件吗？
document.addEventListener('DOMContentLoaded', function() {
// Get references to the audio element and progress bar
let audio = document.getElementById('audio');
let progress = document.getElementById('progress');
var isSeeking = false; // Add a flag to track seeking
// Add an event listener to update the progress bar as the audio plays
audio.addEventListener('timeupdate', function() {
var currentTime = audio.currentTime;
var duration = audio.duration;
var progressValue = (currentTime / duration) * 100;
progress.value = progressValue;
});
// Add an event listener to seek when the progress bar is changed
progress.addEventListener('change', function() {
var progressValue = progress.value;
var duration = audio.duration;
console.log(progressValue);
console.log(duration);
var newTime = (progressValue / 100) * duration;
audio.currentTime = newTime;
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Audio Player with jQuery</title>
</head>
<body>
<p>HELLO</p>
<h1>Simple Audio Player with jQuery</h1>
<audio id="audio" controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/mpeg" preload="auto">
Your browser does not support the audio element.
</audio>
<div id="progress-container">
<input type="range" id="progress" min="0" max="100" value="0">
</div>
</body>
</html>