script.js:12 Uncaught TypeError: Cannot read property 'currentTime' of null

Question

I am doing a music player on js and i need to do a slider so the user can navigate in the audio

Here is my code:

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

That error is happening because you already executed the slider_container() method before your HTML document is fully loaded.

So either you have to place your script at the bottom lines of HTML document or you have to use DOMContentLoaded event to correctly execute your code.

Also it seems to me you are not updating each time the music is being playing.

Thanks to Jaysmito Mukherjee answer on this question.

I have taken some parts of his code and written pure JS based event handling of custom music player bar. I have merged two buttons "Play" and "Pause" to one button.

Here I have used Audio Ontimeupdate event to update the time every time music is played.

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>

Answer 2

This is all you need!

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>