A Pen by Khalid.

index.html

<div class="container">
  <h1>Responsive audio player</h1>
  <p>Demo for the JW Player support forums, as you <a href="http://www.longtailvideo.com/support/forums/jw-player/working-with-wordpress/36869/how-to-override-settings-output#comment-204952">requested</a>.</p>
  <div id="player">Loading...</div>
  <!-- The documentation told me to place the JS 'at the location you want the video to appear', but it would be more appropriate to add this to the JS section -->
  <script>
    jwplayer("player").setup({
       "width":"100%",
       "height":26,
       "primary":"html5",
    "file":"https://dl.dropboxusercontent.com/u/94677785/codepen-asset_beep.mp3" // tick sound from http://css-tricks.com/?p=17841
    });
  </script>
  
  <hr/>
  
  <p>How I think the WordPress plugin should be adjusted to support responsive video <em>and audio</em> players. Check the description below the image for details.</p>
  
  <figure>
    <img src="https://dl.dropboxusercontent.com/u/94677785/codepen-asset_wp-plugin-suggestion-revision.png">
    <figcaption>Delete the 'Player Size' option because it's a restriction when you're using an audio-only player. Add radio buttons to '<del>Fixed</del> width' with an option to set a fixed <code>width</code> and an option to use the value <code>"width": "100%"</code>, which makes it responsive. And add radio buttons to '<del>Fixed</del> height' with an option to set the <code>aspectratio</code>, which overrides <code>height</code> (according to the docs) and an option to use a fixed <code>height</code>. The settings above would make the audio player responsive.</figcaption>
  </figure>
</div>

Responsive-audio-player.markdown

Responsive audio player

Demo: the JW Player is awesome for the modern web. The WordPress plugin needs work though, because it restricts its usage.

A Pen by Khalid on CodePen.

License.

style.css

body {
  background: #eee;
  padding: 20px;
  margin: 0;
  font-family: sans-serif;
  line-height: 1.4;
}

.container {
  background: #fff;
  max-width: 600px;
  padding: 40px;
  margin: 20px auto;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

h1, p, #player, figure {
  padding: 0;
  margin: 0 0 25px 0;
}

a {
  color: #07b;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: 30px 0;
  padding: 0;
}

img {
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  background: #f1f1f1;
}
figcaption {
  padding: 20px 0;
  margin: 20px;
  border-top: 1px solid #ccc;
  box-shadow: inset 0 1px 0 #fff;
}

code {
  margin: 0 1px;
  padding: 2px 4px;
  background: #e0e0e0;
  border: 1px solid rgba(0,0,0,.1);
  color: #333;
  border-radius: 3px;
}