Scott's dashboard

I'm going to say Adrien has implemented this, for the inline player case. Done and done!

Both features are already provided, and implemented! Check the source. By default, the Muxtape-style player will automatically go to the next track in the list. The relevant configuration bit is playNext: true; within the source of the player demo.

The "playable MP3 links" demo also supports this, in the source again..

this.config = {
playNext: false, // stop after one sound, or play through list until end
autoPlay: false // start playing the first sound right away
}

CSS is also provided in-page along with example skins, and examples of how you can swap them out.

Outside of the demos, it's up to the developer to decide how they want to make and handle playlists. I give simple demos using HTML for playlists/collections of MP3s, rather than "over-architecting" things for users learning how SM2 works.

For future stuff, I think it'd be smart to have people using an API mimicking the HTML 5 audio API, so they can eventually drop the SM2 bit once browsers all do the same thing and so on - however, I do like the SM2 API because I built it. ;)

Giving people the option of HTML5 <-> SM2 could be good for choice, so I like the idea of having both of these options available. If you have a current SM2-based project you want to "upgrade" to use HTML 5 audio without having to rewrite your sound code, for example, bum51's code could do a nice job at this, for example. This is good.

On the other hand, if I'm doing some brand-new project and am all into HTML 5 stuff, I'd want to use an HTML 5-like JS API but have SM2 fill in the backwards-compatibility angle for IE 6,7,8 (maybe 9? :/) and so on.

My goal is to try to have a wrapper API for JS-based sound that mimics the HTML 5 stuff closely, so ideally people are learning how to use a "go-between" API that will be very similar to what the browser's built-in support is supposed to be. This despite that I built SM2, but HTML 5 ideally is the future and will get shinier as they add features. I'm pretty sure the audio nerds will demand access to waveform data etc. in the future, for example. ;)

I think separate code bases for these would be a good idea (not in soundmanager.js, but included with the project), they could be add-ons or extensions run alongside SoundManager() and so on so people can mix and match.

I think my first take at an HTML 5-like API wrapper with SM2 fallback will work just at the JS level, eg. new SoundObject() vs. having audio elements in the HTML and trying to handle that case just yet. One step at a time, etc. ;)

Glad to see people stoked about audio thinking about these things. It may be a while before audio is "free" in JS, but the first big steps towards it are being taken right now and it's a pretty interesting time to be building this sort of stuff. – Scott, on November 20, 2009 15:04

Ah yes, your project looks to cover a lot of the HTML 5 audio stuff I've seen out there; nicely done. The demos don't seem to work for me in Firefox (maybe due to the video format used?), but I see the underlying logic looks good - and it does work in Opera. – Scott, on November 20, 2009 01:51

I was able to get a prototype put together, but the playback/performance was quite poor - when the user put the tab or window out of focus, the sound playback breaks down (constant stuttering) and cannot be listened to. Until a solution or acceptable workaround is found for this, I don't feel it's worth releasing an update including the feature - even as an experimental one, given the flash 10 requirement. – Scott, on November 20, 2009 01:42

You can add a "playable" CSS class attribute to the link, which will tell SM2 that it should try playing the URL even though it may not have an .MP3 extension.

eg.
<a href="/stream.php?name=foo" class="playable">this will play</a> – Scott, on November 20, 2009 01:27

Following up bum51's comment with a full post..

Ha, I should have the EQ on both channels if it isn't, yep - I may have forgotten that when adding the second waveform channel recently. I'll check and see where I left off.

Re: Audio(), I like the idea of some sort of generic Sound() object, say, which uses the native Audio() if available, and falls back to SM2 if not.

Thinking about it more, it seems to make sense not to try to "fake" the DOM-native Audio() object by default, in the event that other libraries start looking for it. That said, someone can simply say if (typeof Audio == 'undefined') { Audio = Sound } or some such if they wish.

Mapping the native Audio() methods to SM2 is going to be the interesting/fun (and possibly frustrating? :D) part, I think. ;)

Having some sort of wrapper for Audio() or whatever might be nice, for the pure JS side. I'm not sure about trying to make <audio> work just yet, that's likely to be another can of worms. The smartest thing at this point may be to make an Audio() JS object that mimics the native HTML 5 one, and then uses SM2 behind the scenes for that. It can be an extension of the existing SM2 core, that way. If I get Audio() working, then I can look at the HTML side (which should be an extension of Audio, by that logic, etc.) – Scott, on November 17, 2009 01:51

Clicking the song title toggles play/pause. You could add a UI element for this I guess, but it's pretty straightforward as-is, similar to the "playable mp3 links" demo.

For the page player demo, within page-player.js, try setting autoStart to true only..

this.config = {

...other bits...

autoStart: true, // begin playing first sound when page loads

...other bits...

}

This should get the page player starting automatically after it loads, my local copy looks to be working OK. Make sure you revert any changes to soundmanager2.js for this case to work.

When editing soundmanager2.js, autoPlay may not result in whileplaying()/whileloading() firing and thus the UI doesn't update, that is a separate bug I need to revisit.

Thanks for the demo, sounds like a bug; I'll investigate and if a simple fix is available, I'll provide some code to work around things. In either case, it should be fixed with the next version.

No updates on the HTML 5 front, but I have been working on a few minor bug fixes for SM2. HTML 5 is still in flux and I was experimenting with some Flash 10 ideas, so I'm waiting to see where the <audio> stuff goes. As always, thanks for the bug reports and support! – Scott, on November 13, 2009 06:32

Basically, you will need to have a progress bar element which can "draw" the bar - a background image is convenient for this, or an element with a percentage-based width eg. 0-100%, based on sound.bytesLoaded / sound.bytesTotal.

You then will need to watch for mouse clicks along that line, and set the player position as a percentage of the file time - eg. sound.position / sound.duration or sound.durationEstimate.

The relevant events for this are whileloading() and whileplaying().

Ah, nice to know; I was wondering if appending the movie under <html> or some other higher-level element might work. It's kind of dirty, but if it works, then hey. Good find. </html>