Databases
StackOverflow2013
Postsdbo
POCustom JavaScript/HTML5 player issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCustom JavaScript/HTML5 player issue
    text
    copied!<p>I've been using this custom audio player I put together with a few tutorials and solves around the Internet and have been using it for the past 2 months. </p> <p>It worked 100% in Chrome, but after an update the seek bar happened to stop working. </p> <p>Is this an issue on my end? or does it work for anyone else?</p> <p><strong>HTML:</strong> </p> <pre><code> &lt;div id="musicplayer"&gt; &lt;table&gt; &lt;tr&gt; &lt;audio id="audio" src="../audio/oby/weightless/Got To Be Free.mp3"&gt;&lt;/audio&gt; &lt;td&gt; &lt;button id="play" type="button" onclick="playPause()" &gt;&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;div id="boxed" &gt; &lt;a href="#" id="songName"&gt;Select a song from the playlist&lt;/a&gt; &lt;p class="right" id="timeInfo"&gt;00:00&lt;/p&gt; &lt;input type="range" step="any" id="seekbar"&gt;&lt;/input&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p><strong>JavaScript:</strong></p> <pre><code>&lt;script&gt; var audio = document.getElementsByTagName('audio')[0], div = document.getElementById('timeInfo'); function formatTime(s, m) { s = Math.floor( s ); m = Math.floor( s / 60 ); m = m &gt;= 10 ? m : '0' + m; s = Math.floor( s % 60 ); s = s &gt;= 10 ? s : '0' + s; return m + ':' + s; } setInterval(function() { div.textContent = formatTime(audio.currentTime); }, 100); seekbar.value = 0; var audio = document.getElementById("audio"); var seekbar = document.getElementById('seekbar'); function setupSeekbar() { seekbar.min = audio.startTime; seekbar.max = audio.startTime + audio.duration; } audio.ondurationchange = setupSeekbar; function seekAudio() { audio.currentTime = seekbar.value; } function updateUI() { var lastBuffered = audio.buffered.end(audio.buffered.length-1); seekbar.min = audio.startTime; seekbar.max = lastBuffered; seekbar.value = audio.currentTime; } seekbar.onchange = seekAudio; audio.ontimeupdate = updateUI; audio.addEventListener('durationchange', setupSeekbar); audio.addEventListener('timeupdate', updateUI); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload