Multiple Players + Global Player

[LyteBB]

I'm working on a Soundcloud-type music site. I have multiple tracks on the page with multiple (separated by ID) Wavesurfer.js waveforms, like on Soundcloud in the image below (I know the most logical way would be to save .json data peaks of the audio files as they are being uploaded and then just display that data on Wavesurfer, but I couldn't figure out a way to generate the .json data).

I have a div at the bottom of the page that does not reload, and the site is navigated in a frame (the pages are actually loaded in my single page-app script, but I won't get into that). How can I make a global Wavesurfer player, that can sit in that non-loading div, that will allow me to scrub / play / pause (and skip to next or prev song maybe?) the currently being played song? I want the waveform to be playing on whatever page it appears on, too, along with the global player playing.

Thanks.

As you can see, there's the global player on the bottom, and the other waveforms would be showing on the page.

[katspaugh]

You can check the playlist demo here: http://wavesurfer-js.org/example/playlist/ https://github.com/katspaugh/wavesurfer.js/blob/master/example/playlist/app.js

Here's an AngularJS version of the same demo: http://wavesurfer-js.org/example/angular/ https://github.com/katspaugh/wavesurfer.js/blob/master/example/angular/app.js

[LyteBB]

Hey, thanks a lot for your answer, katspaugh. I am new to working with something like Waveform.js, so I hope you can help me out. Sorry for the length of this comment.

What I am trying to achieve is having each track row show a waveform. The playlist example doesn't have a waveform for each track row, but I see that there is a global player that changes when a different song is clicked, which is partially what I'm looking to do. But, like Soundcloud, I want the waveform for the track currently being played, to play along at the same time with the global player.

Here is a video I made, showing how on Soundcloud, when navigating to another page, the track shows the waveform continuing to play from the current time it's at. In the other tab, I show that I achieved with jPlayer, showing the track playing at the current position it's at while navigating to a different page, as well as the global player controls showing the progress bar playing at the same time as the progress bar on the track's page does. https://www.youtube.com/watch?v=xeUiTejUIOk

But now I'm converting everything from jPlayer to waveform.js instead, which will be quite a process because 1. I have to make a number of plays counter, 2. I have to make the waveform show the current position even if navigating to another page (like going from playing the track on someone's profile, to the tracks page and still showing the progress bar on the current time on another page that's loaded with ajax).

So, a couple questions: Important: Q. 1 - Can I use jPlayer as the player, but use Wavesurfer.js on canvas to generate the waveforms? Basically, combine jPlayer and Wavesurfer.js? If not, I guess I'll just change everything over to pure Wavesurfer.

Q. 2 - How can I make a global player at the bottom of the page (doesn't need to show waveform), like Soundcloud, playing at the same time while the track is playing on the page?

Q. 3 - Having 10 waveforms load on the fly as each page is being loaded probably isn't the most optimal way of showing waveforms.. Is there a way I can generate and save .json peak points to the server on the HTML-coded song upload form and automatically load the .json file into the waveform container? This way would cause less lag and be better for site performance than generating the waveforms on the spot.

Not so important: Q. 4 - Is there a way I can make a button to have the track on loop / repeat while it's selected?

Q. 5 - I noticed that when setting barWidth to anything higher than 0, the thin line doesn't appear while a waveform is loading. How can I show that while having a barWidth set?

I've fiddled with Wavesurfer for a long time and can't seem to solve any of these questions. I'm more of an HTML / PHP person. Thank you so much. Any assistance is very, very appreciated.

[Robinnnnn]

bump! would love to be able to show multiple waveforms on the same page.

[Robinnnnn]

@LyteBB, I sorta figured it out by storing each waveform object in an array.

// attempt to load 2 tracks
var trackUrls = ['/audio/Lullabies (Adventure Club Remix).mp3', 'https://dl.dropbox.com/s/bxfdcacy6w9bjug/phazz.mp3']
var waveforms = [];

for (var t in trackUrls) {
    createWavesurfer(trackUrls[t], t);
}

function createWavesurfer(link, index) {
    // create a wavesurfer here and store it in our collection
    waveforms.push(Object.create(WaveSurfer));

    waveforms[index].init({
        // wavesurfers will have the html tag #track0, #track1, #track2, and onwards.
        container: document.querySelector('#track' + index), 
    });

    waveforms[index++].load(link);
};

For now, each wavesurfer's corresponding divs are hard-coded in my HTML file. Tomorrow I plan to make each div an angular directive filled with its own functionality, so they'll append themselves automatically to the DOM.

<div id="track0"></div>
<div id="track1"></div>

Result:

[LyteBB]

@Robinnnnn Nice work, my divs aren't hard-coded and the ID # is already added to each track row on my pages. So that's one thing down, at least. Unfortunately, I still need to figure out how I can make multiple instances of wavesurfer appear on the page (still haven't gotten it yet) and also my global player that sticks at the bottom of any page you navigate to like in the Soundcloud image, and the song keeps playing. I have this achieved in jplayer, but converting it all over to wavesurfer.js is quite a daunting task :/ especially with my limited skill set in JS and implementin something like this

[sajeeshen]

@LyteBB Would you mind to share the code ? because I am also planning to do some thing similar

[BAProductions]

here my code i'm trying to do the same minux the global player https://jsfiddle.net/DJABHipHop/73xuLfsv/62/