I'm a big fan of metal music and recently I created an online metal music radio called djacc.com.
Every day it plays 25 songs from different bands for each genre selected by the user. These songs are played all the day in the loop. Next day, it loads the new tracks and starts playing. First genre is randomly selected when the site is first loaded.
Let's have a look at the technical details of Dj ACC:
I have used Last.fm API and YouTube APIs for this project. While I'm playing the video, I display metadata information about the track and the band. I'm taking the video URL using YouTube Data API after searching it with track name and display video in chromeless video player. Using YouTube JS API, I control the video operations (play, pause, mute etc.). Last.fm API is used to take metadata about the track and artist such as "artist tags", "artist top albums", "album images" etc.
Grails is my favorite web framework. I strongly recommend it. It's easy to use and you can be very productive in a very short amount time. I wrote two services for Last.fm and YouTube to take metadata and to get video details respectively. I have only one controller with a few actions to query database for the playlist and return track information as HTML and JSON. My server side controller code is only 84 lines. Thx Grails.
CSS & HTML Toolkit
I'm not a designer and I do not understand from design related issues in general. Also, I do not know CSS well. At this point, Bootstrap saved my life. It's an HTML & CSS & JS toolkit for rapid web application development from Twitter. It's a very new project and growing fast. I used basic functionality (layout, buttons, modal box) of it, but it works. I think, you may be more creative than me. Yes, I know. The site needs redesign. Any volunteer?
I used jQuery for JS handling. I think, i don't need to say much about it but here, I want to mention about JS template libraries. I have used jsrender for rendering JSON response to HTML in the client side. I request whole playlist data as JSON from the server and render every track info as HTML when the track is changed or completed. Thus, my server is happy, my client is not.
Storage and CDN
For static data (image, css and js files) storage, I selected Amazon's S3 service. It's really cheap and if you have a heavy load it can prevent your server crying. I don't think my site has such a load, but the rule is the rule: "always follow the best practices". I created a content delivery service using CloudFront over my S3 bucket and distributed my files all over the world. Ohhh yeahhh. I also defined a CNAME for it called "static.djacc.com" to show I'm big enough like Twitter and Facebook.
Deployment & Hosting
Amazon's dedicated servers are a little bit expensive for me, at least for now. I used Amazon Micro Instances for testing purposes. They are working well for small projects like mine. However, for the production, I needed a high performance machine and I found Jelastic (thanks Emrah). It's really fantastic. It has an intuitive web front end, high performance machines, real time scaling and best of all it's free for beta testing period. I put a load balancer front, 4 Tomcat7 application servers behind it and lastly I added my MySQL DB at the end of the stack. Perfect config for now.