Custom Seekbar Widget for Articulate Storyline 360

Step 2:

Create three files ‘seekbar.html’, ‘style.css’ and ‘script.js’ with the following codes and place them in a designated folder.

Adding the Seekbar for the music player

Add the following code into your HTML file for the custom seekbar in your music player that gets updated when the music is played.

Add the following script into the script.js file for the interactive seekbar (forward and backward).

const music = document.querySelector(“.music”);
const toggleButton = document.querySelector(“.toggleButton”);
const progress = document.querySelector(“.progress”);
const progressBar =
document.querySelector(“.progress__filled”);
function togglePlay() {
if (music.paused || music.ended) {
music.play();
} else {
music.pause();
}
}
function updateToggleButton() {
toggleButton.innerHTML = music.paused ? “►” : “❚ ❚”;
}
function handleProgress() {
const progressPercentage = (music.currentTime / music.duration) * 100;
progressBar.style.flexBasis = `${progressPercentage}%`;}
function scrub(e) {const scrubTime = (e.offsetX / progress.offsetWidth) * music.duration;music.currentTime = scrubTime;}
toggleButton.addEventListener(“click”, togglePlay);
music.addEventListener(“click”, togglePlay);
music.addEventListener(“play”, updateToggleButton);
music.addEventListener(“pause”, updateToggleButton);
music.addEventListener(“timeupdate”, handleProgress);
progress.addEventListener(“click”, scrub);
let mousedown = false;
progress.addEventListener(“mousedown”, () => (mousedown = true));progress.addEventListener(“mousemove”, (e) => mousedown && scrub(e));
progress.addEventListener(“mouseup”, () => (mousedown = false));

Toggle the state of the Pause/Play button

Add the following code to the HTML file to incorporate the toggle state functionality for the Pause/Play button into your music player.

const music = document.querySelector(“.music”);
const toggleButton = document.querySelector(“.toggleButton”);
function togglePlay() {
if (music.paused || music.ended) {music.play();
} else {music.pause();}}
function updateToggleButton() {
toggleButton.innerHTML = music.paused ? “►” : “❚❚”;
}
toggleButton.addEventListener(“click”, togglePlay);
music.addEventListener(“click”, togglePlay);
music.addEventListener(“play”, updateToggleButton);
music.addEventListener(“pause”, updateToggleButton);

Add a volume slider to your music player

Add the following code to your HTML file to include a custom volume slider in your music player that will be used to manage the volume.

input style=”padding-top: 48px;” type=”range” id=”volumeSlider” min=”0″ max=”1″ step=”0.01″ value=”1″ oninput=”updateVolume()”

Now you can add the following script into the script.js file for the volume slider functionality.

var audio = document.getElementById(“audioPlayer”);
var volumeSlider = document.getElementById(“volumeSlider”);
var volumeValue = document.getElementById(“volumeValue”);
function updateVolume() {
audio.volume = volumeSlider.value;
volumeValue.textContent = volumeSlider.value; }