Show: Halogen SVG Audio Visualizer Demo

Feedback
, ,
#1

Demo: Halogen SVG Audio Visualizer
Source: here

You need to select your own audio file and then it should start playing. The goal wasn’t to make something massively flashy or exciting but just to learn.

We’ve been migrating a small chunk of our Elm code base to Halogen. I built a little test project to get re-familiar with Halogen and the PureScript ecosystem as it’s only been the lightest of hobbies over the last years. Also as another side project with a friend, I was wanting to see how feasible SVG rendering was performance-wise.

It seems I have no real performance issues with Halogen itself, but if you try to run SVG filters on this many node (only 256), you run into some issues – which is just a browser limitation and SVGs were never thought to be super performant. This is a bummer to me, because I’d prefer to work with SVG over canvas since it’s just virtual DOM.

Maybe however in my free time, I’d like to do purescript-community/purescript-web-svg – which would be a step one for purescript-halogen/purescript-halogen-svg. I still like using SVGs on web apps for a myriad of reasons, and I think we know that the libraries are missing (demand hasn’t been strong enough?).

If you have any particular feedback, I’d take it. (Note: I only tested this in Firefox on Linux and Android so it may look different to you if the web standards aren’t compatible).

4 Likes
#2

Feature request:

  • Allow web links to audio files
  • Then have one of these pre-selected on the homepage (or provide a few options for visitors to select).

I’d like to see this working, but don’t have any mp3s floating around on my machine to upload.

#3

That was actually my initial goal. I reached out to a buddy of mine who makes music for a track, but he never got around to responding. Without wanting to deal with licensing or anything in that rabbit hole, I decided to just make it BYOF (bring your own file). Given I learned what I wanted to and got it to a releasable state, unless I’m real bored, I’ll likely move on to something a bit less play-toy in nature. :sweat_smile:

1 Like
#4

Sadly svg is not the fastest thing out there, I’m in the process of refactoring something from svg to canvas right now:)

2 Likes