CODEWITHSUNDEEP
javascripthtmljqueryaudio
okaykendall
okaykendall

Reputation: 1

JS or jQuery function to select a local audio track while it is playing?

Right now I have a music app that has a few local mp3 files that are played when you click on divs, which link to the audio and are triggered with the onClick function to play() method. there is also a scrolling screen that displays the song's artist and title.

The audios are stored in a div in the html, separate from the divs that hold their onclick buttons, but they each share a class name with the div that plays their specific song.

I used this function: https://j11y.io/javascript/shuffling-the-dom/ (the jquery version) in order to shuffle the audio files and attached a click handler to a shuffle button in order to play a random song (this works!), but now I want to be able to find the one that is playing and display the song info (title/artist) in the screen and animate the button that can be clicked to play this specific song.

As of now, each song has its own play function and unique js written for the screen info that is fired onclick.

I've tried creating an object array for the songs, and using the onplaying method to try to select the current one playing from the shuffle function - but I'm really quite stuck.

Long story short, I want to identify the song playing from the shuffle function, and attach a handler that will apply the class that holds the animation to the songs title div (so the user knows which button it is) and that will fire its information to scroll in the screen.

this is the call to the shuffle function (jquery):

$("#shuffleBTN").on("click", function() {
    $("audio").shuffle();
    $("audio").get(0).play();
});

this is the object array i think i will need (not all the objs included):

const tracks = [
    {
        "title": "My Rifle, My Pony, and Me",
        "artist": "Dean Martin",
        "source": "songs/My Rifle, My Pony and Me - Dean Martin.mp3"  
    },

    {
        "title": "Unicorn",
        "artist": "Four Tet",
        "source": "songs/Four Tet - Unicorn.mp3"  
    },

    {
        "title": "Prospect Hummer",
        "artist": "Animal Collective feat Vashti B",
        "source": "songs/ProspectHummer.mp3"  
    },
]

i think this could be getting in the way? its a handler that prevents more than one song from playing at once.

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
            // audios[i].currentTime = 0;
        }
    }
}, true);

and here's an example of one of the the individual functions im using to trigger and play the songs (trust me, I know how tedious and stupid this method is but i'm still a novice at the js object model)

const cowboySong = document.getElementById('cowboySong');
function playCowboySong() {           
cowboySong.play();
scrolling.innerHTML = `NOW PLAYING - MY RIFLE, MY PONY, AND ME - DEAN MARTIN`;
}

Please let me know if there are any more details I can provide for a solution - thanks!

Upvotes: 0

Views: 307

Answers (1)

Abraham Labkovsky
Abraham Labkovsky

Reputation: 1956

Ideally, you want your HTML for each track and the play function to be generic and populate the relevant data from your array.

In broad strokes, define a template: a string with your HTML with placeholders for the data from each array element. Then, you map over your array, outputting the merged HTML as a string. Then you can join the array (optionally with some HTML separator if necessary like a <br />). Now you have a string with all of your markup and you just need to have made a container (some div with an id you can grab) and you can add your string as a child of your container. (Like, $('#containerID').append(tracksHTML))

You can give each track an id and your function to play would ideally use the provided id to set a class like playing on the currently playing track. You can first find by class if any track have that class and pause and remove the class before adding and playing the selected one. You can make your styling based off of that class.

For the random functionality, you would not need any fancy plugins. You can use a simple one liner to get a random element from your array and call your play function with the id from that element.

I know I am not directly helping answer this question, but in this instance, you are looking for a solution when your setup needs some fixing first...

Upvotes: 0

Related Questions