script.js：12 未捕获的类型错误：无法读取 null 的属性'currentTime'

Question

我正在js上做一个音乐播放器，我需要做一个滑块，这样用户就可以在音频中导航

这是我的代码：

function slider_container() {
const audio = document.getElementById('audio');
const time = audio.currentTime;
const time_max = audio.duration;
document.getElementById('current_time').innerHTML = "" + time_max + "";
}
slider_container();

<div class="slider_container">
<div class="current-time" id="current_time">00:00</div>
<input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
<div class="total-duration">00:00</div>
</div>
<audio src="Audio/free.mp3" id="audio" autoplay="autoplay">
</audio>

Answer 1

这就是您所需要的！

var audio = document.getElementById('audio');
var slider =  document.getElementById('slider');

function getTime(seconds){
var date = new Date(seconds * 1000);
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
if (ss < 10) {ss = "0"+ss;} 
var t = hh+":"+mm+":"+ss;
return t;
}

function seekTo(){
audio.currentTime = slider.value/100 * audio.duration;
}
function audioLoad(){
document.getElementById('duration').innerText = getTime(audio.duration);
}
function reset(){
audio.currentTime = 0;
}
function play(){
audio.play();
}
function pause(){
audio.pause();
}
setInterval(function(){
audioLoad();
document.getElementById('current_time').innerText = getTime(audio.currentTime);
slider.value = audio.currentTime/audio.duration * 100;
}, 500);

<div class="slider_container">
<div class="current-time" id="current_time">00:00</div>
<input type="range" min="1" max="100" value="0" id="slider" class="seek_slider" onchange="seekTo()">
<div id = "duration" class="total-duration">00:00</div>
</div>
<button onclick="pause()">Pause</button>
<button onclick="play()">Play</button>
<button onclick="reset()">Reset</button>
<audio audioLoad src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" id="audio" autoplay="autoplay">
</audio>

Answer 2

发生此错误是因为在HTML文档完全加载之前已经执行了slider_container()方法。

因此，您必须将脚本放在HTML文档的底部，或者必须使用DOMContentLoaded事件来正确执行代码。

而且在我看来，你并没有在每次播放音乐时都更新。

感谢Jaysmito Mukherjee对这个问题的回答。

我已经使用了他的一些代码，并编写了自定义音乐播放器栏的纯JS事件处理。我已经合并了两个按钮"；播放"；以及"；暂停"；到一个按钮。

在这里，我使用了Audio Ontimeupdate事件来更新每次播放音乐的时间。

window.addEventListener('DOMContentLoaded', (event) => {
const audio = document.getElementById('audio');
const current_time = document.getElementById('current_time');
const total_duration = document.getElementById('total-duration');
const seek_slider = document.getElementById('seek_slider');
const play_pause_button = document.getElementById('play_pause');
const reset_button = document.getElementById('reset');
var time,time_max;
function getTime(seconds){
var date = new Date(seconds * 1000);
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
if (ss < 10) {ss = "0"+ss;} 
var t = hh+":"+mm+":"+ss;
return t;
}
// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
audio.ontimeupdate = function() { 
slider_container();
slider_mover();
};
play_pause_button.addEventListener('click', function(){ 
if(play_pause_button.innerHTML=='Play'){
audio.play();
play_pause_button.innerHTML="Pause";
}else if(play_pause_button.innerHTML=='Pause'){
audio.pause();
play_pause_button.innerHTML='Play';
}
});
reset_button.addEventListener('click', function(){ audio.currentTime = 0; });
function update_time(){
time = audio.currentTime;
time_max = audio.duration;
}
function slider_container() {
update_time();
current_time.innerHTML = getTime(time);
total_duration.innerHTML = getTime(time_max);
}
function slider_mover(){
update_time();
var percentage_num = (time/time_max)*100;
seek_slider.value = percentage_num;
}
});

<div class="slider_container">
<div class="current-time" id="current_time">00:00</div>
<input type="range" min="1" max="100" value="0" class="seek_slider" id="seek_slider">
<div class="total-duration" id="total-duration">00:00</div>
</div>
<button id="play_pause">Play</button>
<button id="reset">Reset</button>
<audio src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3"" id="audio" autoplay="autoplay"></audio>