var context = {
soundurl:"https://raw.githubusercontent.com/tomoyamkung/javascript-sample/master/Underscorejs/template/mp3/"};
//JSON オブジェクト
var mp3s = {
"sound1":"c11.mp3",
"sound2":"d7.mp3",
"sound3":"d8.mp3"
};
$(function() {
// Underscore.js の `template` メソッドを使って option タグを追加
var template = _.template($("#option_template").text());
var pulldown = $('#list');
_.each(mp3s, function(val,key) {
var tag = template({filename: this.soundurl + val, title:key});
pulldown.append(tag);
},context)
// 選択された項目の mp3 を自動再生
pulldown.change(function() {
var x = pulldown.find("option:selected").val();
$('#player').attr('src', x).attr('autoplay', 'autoplay');
});
});
<audio id="player" controls></audio><br/>
<select id="list" >
<option value="" />
</select>
<!-- Underscore.js の template メソッドで使用する HTML のテンプレート -->
<script type="text/template" id="option_template">
<option value="<%= filename %>"><%= title %></option>
</script>
External resources loaded into this fiddle: