This is

Ben's Blog

Misery.FM – Sad songs and pouring rain…

Yeah yeah yeah. Turns out I’m pretty shitty at blogging regularly. I’d love to tell you I’ve been doing something fun, but apart from all the burgers, it’s (mostly!) been a summer of client work. I will try and be better, I promise. Anyway…

A few months back I narrowly missed out on buying a domain. I won’t go into the details, but as soon as I saw it I knew exactly what I’d build on it. But I didn’t get the domain and I didn’t really have time to build the site. Needless to say I stewed on it for a couple of weeks. And then on a lazy Sunday a couple of weeks back, I figured I’d build it anyway. Time for a side project!

I started by asking Facebook to suggest to me some miserable songs. I picked a working title and registered a domain. The premise – sad songs play from YouTube one after another and you can turn on rain noise and thunder in the background. Simple right? So I made it.

Misery.FM

How I built it

I appreciate this isn’t for everyone, but for those interested…

Figuring that the stuff that makes it work wouldn’t be too hard, I started with the graphics. I found, cropped and resized a picture of a vintage frame from a stock site. Needing transparent edges I saved it as a 24bit PNG. Even after shrinking with my favourite shrinker, TinyPNG.org, it was still 700k+. Which is unacceptable for a webpage. So I cut the thing into pieces, making the edges PNGs and the beefy middle sections JPGs. This came out at a much more acceptable ~140k. I wanted a shadow behind the frame, but adding that as 24bit PNG (on the edges or just as a PNG behind) added loads to their size. So I added a wide shadow in CSS to a box hidden behind the frame. Which worked nicely. Next I found a damask pattern I liked on deviantART and coloured it appropriately. I wanted a vignette to highlight the frame, so I added this with CSS. Finally I found some clouds and stormy pictures and composited them together to make the picture behind the info section.

With the graphics more or less ‘there’, I added a video into the frame. I used the YouTube iFrame embed API and linked up some buttons to make the song play, stop etc. I created a small database of songs and used an AJAX call to pick a random song from the database as one ends, cue it up and play it. To prevent repetition I wrote something to track the songs playing and ensure the song being picked isn’t one of the last 10. With the video playing I needed rain and thunder.

I scoured FreeSound for my favourite rain and thunder samples – there’s definitely some gems, but there’s a LOT of crap on there… Samples saved, I figured there was two ways I could go about playing them. Either – one long continuous sound or a short loop. I looked into the long continuos sound first, but figured it was going to suck up a lot of bandwidth – and there’s no real good ‘elsewhere’ host / API for sound – YouTube won’t let you play sound without a video and I wasn’t prepared to pay for SoundCloud. So I went with a loop. Using my three favourite samples I created one 12 second rain loop in Audacity (old skool, right?!). I looked into using HTML5 as the player, but didn’t think it was mature / cross browser friendly enough, so went with SoundManager 2. Alas SoundManager 2 doesn’t seem to loop properly (at least for me), leaving a slight gap in between each play. I decided to get around this by playing the sample twice, setting the sample to half fade in and half fade out using an ‘Equal Power’ adjustable fade, with the second play starting when the first should be at the peak (make sense? – so at any one time the volume should be roughly equal). Even through decent headphones the looping seems to sound more or less OK.

Next I set up some thunder samples. These were cropped and cleaned from sounds on FreeSound. I chose 5 thunder cracks and wrote something to choose one at random. This is set using a javascript setInterval from a number chosen at random from 9 different lengths, between 45 seconds and 5 minutes, meaning once the thunder is activated it’ll crack every now and again. I used SoundManager 2 to hook up buttons with to control the on/off and volumes for the rain and thunder. I deliberately didn’t connect this to YouTube so you could play the rain and thunder without a video playing.

The last major step was changing my plain text links (that make the stuff work) to buttons. I used an icon font and created some round links in CSS, which is up and away the easiest way to do buttons with pictures. After that it was just adding social icons and copy and tidying the whole thing up (and of course adding the hundred or so songs that make up the misery…).

…anyway, have a look. Misery.FM – for those of you that like to wallow in your own sorrow…

1 Comment

  1. fantazi iç giyim

    Fantastic publish. I was looking at constantly the following weblog for prompted! Invaluable data specifically the rest of the part :) I actually deal with such information very much. I had been seeking the following selected info to get a very extensive time frame. Appreciate it and best with chance.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2017 Ben's Blog. All rights reserved.