Challenges with personalized music player

Question

Challenges with personalized music player

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/CSS">
            #custom{
                font-family: monospace;
                font-size: 16px;
                max-width: 650px;
                border-style: solid;
                border-color: black;
                border-width: 1px;
                border-radius: 5px;
                padding: 8px;
                padding-bottom: 15px;
                padding-left: 12px;
                padding-right: 12px;
            }
            img{
                margin-top: 3px;
                float: left;
            }
            #bar, #currentTime, #duration, #skip{
                display: inline-block;
            }
            #currentTime, #duration, #skip{
                margin: 0px;
                padding: 0px;
                margin-top: 3px;
                margin-left: 10px;
            }
            #bar{
                margin-top: 10px;
                height: 14px;
                width: 400px;
                background: lightgrey;
                border-radius: 50px;
                margin-left: 9px;

            }
            #slider{
                height: 14px;
                width: 15px;
                background: black;
                border-radius: 50px;
            }
        </style>
    </head>
    <body onLoad="count()">
        <script type="text/javascript">
            var track = 0;
            function count(){       
                var music = document.getElementById("myAudio");
                var duration = music.duration;
                var durationInMins = Math.floor(duration/60);
                var durationInSecs = Math.floor(duration-(durationInMins*60));
                    if(durationInSecs < 10){
                        var durationInSecs = "0" + durationInSecs;
                    }
                    if(durationInMins < 10){
                        var durationInMins = "0" + durationInMins;
                    }
                document.getElementById("duration").innerHTML = durationInMins + ":" + durationInSecs;
                var timer = setInterval( 
                    function(){
                        var music = document.getElementById("myAudio");
                        var currentTime = music.currentTime;
                        if(currentTime > 60){
                            var min = Math.floor(currentTime/60);
                            var sec = Math.floor(currentTime-(min*60)); 
                        }else{
                            var min = "0";
                            var sec = Math.floor(music.currentTime);                        
                        }
                        if(sec < 10){
                            var sec = "0" + sec;
                        }
                        if(min < 10){
                            var min = "0" + min;
                        }
                        document.getElementById("currentTime").innerHTML = min + ":" + sec;                     
                        var percent = 100 * (music.currentTime/duration) - 2;
                        document.getElementById("slider").style.marginLeft=percent + "%";
                    }
                , 1000);
                }
            function toggleP(){
                var music = document.getElementById("myAudio");
                if(music.paused == true){
                    music.play();
                }else if(music.paused == false){
                    music.pause();
                }
            }
            function skip(){
                var trackList = ["http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3", "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"];
                if(go == "back"){
                    track = track - 1;
                }
                if(go == "forward"){
                    track = track + 1;
                }
                var aa = clearInterval("timer");
                var music = document.getElementById("myAudio");
                music.pause();
                music.src=trackList[track];
                music.load();
                var a = setTimeout(function(){music.play(); count();} , 6000);
            }
        </script>
        <audio id="myAudio" src="http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3">
        </audio>
        <br>
        <div id="custom">
            <img onClick="toggleP()" src="img/media-play-pause-resume.png" height="30px"/>
            <p id="currentTime">00:00</p>
            <div id="bar">
                <div id="slider"></div>
            </div>
            <p id="duration">00:00</p>
            <p id="skip"><strong><a onClick="go = 'back'; skip()"><<</a> <a onClick="go = 'forward'; skip()">>></a><strong></p>
        </div>
    </body>

Seek feedback and fixes for slider behavior after skipping songs. Also, discuss challenges in aligning the duration bar without affecting other elements. Any guidance on this matter would be highly appreciated. Thank you!

javascript css html audio

Answer 1

Answer №1

Check out this jsBin demo!

Avoid using inline JS in your HTML! It can make your code difficult to debug. Keep your logic separate from your presentation/template.

Let's start with understanding how variables work. Once you declare a var, there's no need to redeclare the same variable using var again within your code. Simply use or modify it. Declare all your variables at the top like so:

function getElementById(id){return document.getElementById(id);}

var musicElement = getElementById("myAudio"),
    trackInfoElement = getElementById("trackInfo"),
    durationElement = getElementById("duration"),
    currentTimeElement = getElementById("currentTime"),
    sliderElement = getElementById("slider"),
    prevButtonElement = getElementById("prev"),
    nextButtonElement = getElementById("next"),
    toggleElement = getElementById("toggle"),
    currentTime,
    trackList = [],
    currentTrackIndex = -1,
    totalTracks = trackList.length;

...and you're good to go. Avoid repeating variable declarations throughout your code.

If you want to provide more information to the user, consider storing data in Objects with desired properties:

trackList = [
  {
    artist : "The Doors",
    fileName : "People Are Strange",
    file : "http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3"
  },
  // Additional track objects here...
]

This way, you can access audio paths and display additional track information to the user.

Remember the principle of Don't Repeat Yourself. Create functions that help abstract repetitive calculations and return formatted time values:

function formatTime(t) { 
  var minutes = ~~(t / 60),
      seconds = ~~(t % 60);
  return (minutes < 10 ? "0"+minutes : minutes) + ':' + (seconds < 10 ? "0"+seconds : seconds); 
}

Create specific functions for progress tracking, play/pause functionality, handling previous and next tracks, and setting up event listeners accordingly.

With all these functions in place, simply add the necessary event listeners:

// Event listeners setup
prevButtonElement.addEventListener("click", handleSkip);
nextButtonElement.addEventListener("click", handleSkip);
toggleElement.addEventListener("click", handlePlayPause);
musicElement.addEventListener("timeupdate", updateProgress);
musicElement.addEventListener("ended", handlePlayPause);

// Automatically start playing
nextButtonElement.click();

No need for a separate interval function when you have

musicElement.addEventListener("timeupdate", updateProgress)

taking care of it.

Answer 2

Check out this jsBin demo!

Avoid using inline JS in your HTML! It can make your code difficult to debug. Keep your logic separate from your presentation/template.

Let's start with understanding how variables work. Once you declare a var, there's no need to redeclare the same variable using var again within your code. Simply use or modify it. Declare all your variables at the top like so:

function getElementById(id){return document.getElementById(id);}

var musicElement = getElementById("myAudio"),
    trackInfoElement = getElementById("trackInfo"),
    durationElement = getElementById("duration"),
    currentTimeElement = getElementById("currentTime"),
    sliderElement = getElementById("slider"),
    prevButtonElement = getElementById("prev"),
    nextButtonElement = getElementById("next"),
    toggleElement = getElementById("toggle"),
    currentTime,
    trackList = [],
    currentTrackIndex = -1,
    totalTracks = trackList.length;

...and you're good to go. Avoid repeating variable declarations throughout your code.

If you want to provide more information to the user, consider storing data in Objects with desired properties:

trackList = [
  {
    artist : "The Doors",
    fileName : "People Are Strange",
    file : "http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3"
  },
  // Additional track objects here...
]

This way, you can access audio paths and display additional track information to the user.

Remember the principle of Don't Repeat Yourself. Create functions that help abstract repetitive calculations and return formatted time values:

function formatTime(t) { 
  var minutes = ~~(t / 60),
      seconds = ~~(t % 60);
  return (minutes < 10 ? "0"+minutes : minutes) + ':' + (seconds < 10 ? "0"+seconds : seconds); 
}

Create specific functions for progress tracking, play/pause functionality, handling previous and next tracks, and setting up event listeners accordingly.

With all these functions in place, simply add the necessary event listeners:

// Event listeners setup
prevButtonElement.addEventListener("click", handleSkip);
nextButtonElement.addEventListener("click", handleSkip);
toggleElement.addEventListener("click", handlePlayPause);
musicElement.addEventListener("timeupdate", updateProgress);
musicElement.addEventListener("ended", handlePlayPause);

// Automatically start playing
nextButtonElement.click();

No need for a separate interval function when you have

musicElement.addEventListener("timeupdate", updateProgress)

taking care of it.

Answer 3

Answer №2

The skipping could potentially be due to the ongoing interval from the previous song that was never properly halted.

Answer 4

The skipping could potentially be due to the ongoing interval from the previous song that was never properly halted.

Challenges with personalized music player

Answer №1

Answer №2

Similar questions

Ways to convert an object with values into an array containing those values

Enhancing Your Website with WordPress Customizer API: Introducing Kirki's Repeater Image Feature

Axios - Error: Promise Rejected - The request was unsuccessful with a 500 status code

Encountering an issue with the npm start command in my React application

Ways to split images and text in list items using CSS

Can you determine the height of an image if only the width and border width are provided?

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

The data stored in LocalStorage disappears when the page is refreshed

How can I write the code to enable dragging the button for navigating to the next page?

Issues with angular-strap popover's onBeforeShow function not functioning as expected in Angular

Localization support is working partially in a Node Express application that uses Handlebars for templating

Position the second line of text to align in MUI

What is the best way to link function calls together dynamically using RXJS?

Numerous pie charts created from data retrieved through multiple ajax requests

Manipulating links using JQuery: avoiding the binding of new links

SlickGrid checkbox formatter/editor experiencing issues with data consistency

How can I customize the dropdown list arrow to match my own design?

I am looking to remove identical innerText values from two arrays using JavaScript

Is there a sweet TypeScript class constructor that can take in its own instance as an argument?