The grey bar is sticky and stays at the bottom of the view port. There's actually more content on the page (news, upcoming songs, etc.) that is revealed when scrolling. The first impression is that the player is covering the entire screen, whereas in reality, the player itself is only the grey bar at the bottom. The next example I want to look at, is Wacken Radio, the dedicated radio station for the Wacken Open Air festival: The focus seems to be on the music, which is exactly what I want. The first example, the player of "Rock Antenne Hamburg", is a good example for how visual clues (the album covers, the text "Jetzt läuft", translating to "Now playing") can greatly enhance the user experience of a radio player.
Let's look at a few examples of radio players on the web. It could run in a popup, sit in a navigation, a side bar or a top bar that scrolls with the content. With the stream ready, let's talk about the design next. A popular search engine™ will yield a ton of different stations to test with, so I select one that I personally like. So step 1 is to find a stream and ideally an API endpoint that gives us the currently playing song. There's a lot of radio stations out there that can be used to test the player. No stream, ok - but how do we test the interface, then?Įxcellent question.
#Tuner radio player how to#
While this post does not cover how to set up your own stream (that one's for another time), I will show you how to present a stream to your listeners in an accessible and visually appealing way! Like for most tasks, listeners today use a computer and, more specifically, a browser.
In a radio stream, moderators can actually engage with listeners: think, interviews with artists with questions from the crowd or quiz shows! Indeed! Streaming services detach the listeners from the moderators, editors and the artists. You might know that I like to combine my love for music with coding, so instead of building full-blown instruments, today I'll focus on a way to transport music: radio!
#Tuner radio player full#
Video killed the radio star, internet killed the video star, and with this tutorial I'm going to show you how to come full circle!
0 kommentar(er)
