0

I have a website which I maintain for my brother in law who is a pianist. I made the website a long time ago when I was a lot less experienced in web design and development, and recently he requested that I make the website responsive, so that it works well on phone and tablets too. So, using bootstrap I am doing this and am also taking the opportunity to overhaul a lot of the layout which is not really that good... more utilitarian than anything.

On the website there is a page about his composition work and included on this page is various media sampling his work. So, most of this media consists of audio clips. There is a list of compositions, and some have audio clips beside them. The solution I came up with at the time for laying these out was to use a definition list. With composition titles in <dt> and audio clips under <dd>

Unfortunately this makes things a little awkward, and it's not so obvious how things go together. Some compositions come in several parts, and to label them all I have done is text next to them like this

<dd><audio src="part1.mp3" controls>Your browser does not support the HTML audio tag</audio> - Part 1</dd>

Of course, listing like this makes it harder to read and understand what belongs to what. I was wondering if there were any best practices for laying out and labeling media in a case like this, as I cannot find any specific examples applicable to this situation around on the net and I am not sure exactly what else I can do... short of a lot of divs.

(since I linked the site earlier, if there are any other suggestions I am open to constructive criticism in other areas. I am more a programmer than a designer so I know it's not perfect.)

Improve this question
1
  • check out soundcloud.com you can actually upload all the pieces there and then embed the code straight to your website. it gives you a nice player with titles and controls. I think this would be the best painless solution for you.
    – Stanley VM
    Commented Sep 11, 2015 at 13:11

1 Answer 1

Reset to default
1

https://jsfiddle.net/r56ehyzL/1/

  1. You shouldn't use custom audio players. Imagine every site would have a different audio player.
  2. I would separate works with audio from works without audios. (looks more organized)
  3. The embedded videos can get so big (1110px width) that its uncomfortable.
  4. Nice music btw.
Improve this answer
3
  • This is great, thanks! For now this seems the ideal. The custom player is for responsiveness. With the standard audio player the elements overflow and hang off the side of the page... Do you have any suggestions about how to mitigate this? I have tried looking for a way to turn off the navigation bar so it is just the play button and audio, but I can't find anything...
    – Luke
    Commented Sep 13, 2015 at 9:15
  • Also, thanks! He is really talented. His music has been played on BBC Radio 3!
    – Luke
    Commented Sep 13, 2015 at 9:17
  • 1
    @Luke It is responsive. Proof. Just set the width of the audio tag to 100% if your whole page's width is under x.
    – Larivact
    Commented Sep 13, 2015 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.