simondlh simondlh - 1 month ago 9
HTML Question

Create HTML dropdown list of music that can be played inside an audio player

I am trying to create a simple music player for my website where the user can select from a number of different music tracks from a drop down list. The music is stored on our server.

This is what I have so far: http://jsfiddle.net/rUf6j/7/ I just need to move the options into a drop down list.

HTML:

<audio id="player" controls="controls">
<source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>

<table>
<tr>
<td>Flying in clouds</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a></td>
</tr>
<tr>
<td>Chilling on beach</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Listen</a></td>
</tr>
</table>


jQuery:

$(document).ready(function(){
$('[source]').on('click', function(){
change( $(this).attr('source') );
});
});


JS:

function change(sourceUrl) {
var audio = document.getElementById("player"),
source = document.getElementById("mp3_src");
source.src = sourceUrl;
audio.pause();
audio.load();
audio.play();
}

Answer

Simply move links to select where option value is link to source and text is song name. Change event to .on('change')

$(document).ready(function() {

  $('#selection').on('change', function() {
    change($(this).val());
  });

});


function change(sourceUrl) {
  var audio = document.getElementById("player");
  var source = document.getElementById("mp3_src");

  audio.pause();

  if (sourceUrl) {
    source.src = sourceUrl;
    audio.load();
    audio.play();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="selection">Listen:</label>
<select id="selection">
  <option value="">- Select track -</option>
  <option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
  <option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
<br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />Your browser does not support the audio element.
</audio>

Comments