The page we are looking to be designed is the "burst page". It is a page the user lands into after they click the search result in Google.
Please note that the page must be responsive and we expect to get 2 layouts of this page: mobile-web and desktop, where mobile-web is most important!
The page has the following the following main elements:
1. Audio player with:
- Play/Pause button
- Prev/Next buttons
- Share button (important!!)
- Interactive audio progress bar (allow the user jump to certain points in the audio), audio duration
- full show button: this button allows the user to elaborate the burst and continue the listening of the full show from the point he taped this button. As this is an unconventional button, you are free to design it as you think it should be so the user will understand what this button is doing
2. Title of the page - the H1 header - that is built from "Listen to: " + Radio Show name + "on" + Keyword1, Keyword2, and Keyword3. For example: "Listen to: The Morning Show on Spiderman movie and Review"
3. Each audio has a category such as: Entertainment, Business, Politics, etc... Only 1 category is presented per audio. Should be presented as a tag.
4. Next bursts - a list of related audio bursts to listen to. Each item should include a title, date and time it was aired, duration, keywords/tags, play button
5. Search button
Most important actions in the page are:
Play, Next audio and Share. Full show button
1. Show a Transcript button
2. Show an Embed audio button
(these options can be encapsulated in a "..." icon