00:00
00:00
Pahgawk
I'm a computer graphics programmer who occasionally still makes art.

Dave Pagurek @Pahgawk

Age 27, Male

UBC

Toronto, Canada

Joined on 2/8/09

Level:
7
Exp Points:
496 / 550
Exp Rank:
> 100,000
Vote Power:
4.94 votes
Art Scouts
1
Rank:
Civilian
Global Rank:
79,796
Blams:
6
Saves:
71
B/P Bonus:
0%
Whistle:
Normal
Trophies:
33
Medals:
69

A version of the Newgrounds Audio Player, without Flash

Posted by Pahgawk - September 28th, 2013


I've been doing a bunch of things with Javascript recently, such as an equation parser and graphing calculator and a bad jokes database. I also submitted a new track to the audio portal today, which got me thinking. Surely something like the Newgrounds audio player could be done with modern web technologies, right?

Short answer: almost.

If you want to see what I made, here's an almost functional HTML/javascript audio player (works in modern browsers): http://codepen.io/davepvm/pen/eDFij

What worked well:
Getting the audio playing part was actually not much of a challenge. Getting the visuals to look reasonably close to the Flash version on Newgrounds took the longest, and it's still not quite the same, since I don't have the same fonts and icons, and I'm missing some glows and textures. Feature-wise, though, everything works in the newest versions of Chrome, Firefox, and IE.

What didn't:
Audio visualizations.

If you've done anything like this in Flash, you'll know that you can grab the current sound sample being played in an event and update the visuals accordingly. The API for the HTML5 <a udio> tag, on the other hand, is much (much much much) higher level than that. It lets you change the volume, pause and play, etc. That's pretty much it.

HOWEVER: there may be some solutions!

1. Using (currently) non-standard APIs
We've got the Web Audio API, which actually is supposed to be supported by a lot of browsers, but only recently (it apparently only works in the current nightly builds of Firefox, for example.) It doesn't work at all in IE. Basically, it only works reliably in new versions of Chrome. If the benefit of not using Flash is to get this thing working on things like mobile devices where Flash isn't an option, then using an API that is barely supported seems a little weird. That said, for the situations when a Flashless solution is best, a visualizer might not even be necessary. This looks like the way to go going forward, though, so possibly over the weekend I'll make a visualizer for the player and then only run it if the browser supports it.

UPDATE: I recently got a basic visualizer working, which you can see if you're running a new version of Chrome! Check out the source code and maybe try making a visualizer of your own! (instructions in a comment at the bottom of the code.)

2. Preprocessing the sound data into another format
This one seems pretty crazy, but in a cool way. Grant Skinner made an AIR app that takes the sound data from a file and puts it into an image, which can then be easily read by Javascript. This solution is great because once the preprocessing is done, Javascript compatibility is a lot less of an issue, since the image isn't a problem at all, and <canvas> support is pretty decent. The problem with this is that it means the sound files need to be preprocessed. There are lots of sound files on Newgrounds so it's definitely not a practical solution (and also I'm just doing this for fun with no affiliations, so that would be impossible for me to test with more than one or two songs anyway.)

Final Thoughts
This isn't very practical right now. It doesn't really do visualizations, so it wouldn't work that well for a desktop site, and this version of the player is pretty reliant on mouseovers, which doesn't apply to mobile. I hear audio embeds for external sites is going to become a thing, though, so possibly a visualizationless player in Javascript might work well for that, with a Flash fallback. Either way, it was a cool way to kill an afternoon.

UPDATE: Once again, there are now visualizations if you're on Chrome. Check those out, and leave a comment with a link if you fork the pen on CodePen and add your own visualizer!

UPDATE 2: Here's a version with much more modular code, without a visualizer, and where it stretches to fit the width of the container: http://codepen.io/davepvm/pen/DgwlJ

UPDATE 3: Here it is as a video player, currently still using the old (read: worse) code. http://codepen.io/davepvm/pen/luqFk

</dave>

A version of the Newgrounds Audio Player, without Flash


Comments

How can this be

MAGIC! ...and a lot of CSS

That's some rad programming right there. Fantastic job. Did you show it to staff yet?

Haha, not yet, I finished writing this news post at around 2 am here and then I fell asleep.
EDIT: PMed Tom.

Neat! The viz weren't working but I didn't mind that at all. I could almost see it as a mini player. Where it doesn't have the top bit at all. Its just this mini player that can fit in your pocket

Mhmm, that's certainly an option! Also, out of curiosity, what browser/version do you use?
also: here's a single-line version: http://codepen.io/davepvm/pen/HpjBJ

Dave's taking NG by storm.

This is actually a subtle attempt to get newgrounds to father my children

or something

I personally hate the visuals used in the art portal. They jam my browser like crazy.

Well, if it's any consolation, I think they're looking to change the Newgrounds design a bit to make it work in more places, so it might be different later anyway. Here's a thing Luis posted: http://luiscastanon.com/portfolio-ng-redesign.php

The NATA chata can father your children. We don't have much else to do..

Goddamit, I meant audio portal. :|

this is fucking awesome. beg Tom to integrate it to the site

haha thanks!
tom
tom pls
(but in reality this is more of a proof-of-concept thing than anything practical, except for maybe the visualizerless one.)

dammit, Dave. Is there anything you can't do?

It's like, "Oh, hey guys, just got done kicking almost everybody's ass in NATA and made a lil' joke database. Here's a redone Newgrounds audio player. Gotta go fight some crime now, later taters."

I'm also Batman.

Nice! I'm always amazed at what can be created by regular web-technology nowadays. Not as simple as Flash maybe, but definitely more flexible. Btw, have you tried disabling Flash and viewing a track in the AP? You'll get an alternative player (in what I'm guessing is JS and/or HTML5), but just with the bar, a play/pause button and volume control. This is much cooler though.

The player you currently get in both the video and audio portal when Flash is disabled is a per-browser thing. In an audio or video tag, if you add the controls parameter (e.g. <video controls></video>) it tells the browser to stick some controls in there. That'll look different depending on what browser you use because that's 100% the browser's doing. It's a pretty good fallback for when javascript is disabled, because the player I made is reliant on javascript.

Ah, you did know about it. I thought it was just a mockup graphic the first time I saw it, since the play button didn't work. In a few years it did, so I assumed the staff had been working on it. Apparently, that was just a browser bug then? Thanks for the info.

This is pretty cool. Any chance you can release this to work with greasemonkey to replace NG's audio player? It's been playing hell with my cpu and I'm just sorta fed up with it.