Slider Song List
HTML
<script src="https://use.fontawesome.com/2748f851ad.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<body>
<div class="container mainContent">
<div class="row">
<div class='col-md-12'>
<div class="row">
<div class='col-md-12 songListItem'>
<a class='song'>Song 1</a>
<div class="slider"></div>
</div>
</div>
<div class="row">
<div class='col-md-12 songListItem'>
<a class='song' >Song 2</a>
<div class="slider"></div>
</div>
</div>
</div>
</div>
<!-- /.Main song list -->
</div>
<!-- /.Main content-->
<nav class="navbar navbar-default navbar-fixed-bottom bottomNav">
<div class="playButton fa fa-play-circle-o fa-5x"></div>
</nav>
<!-- /.bottom controls -->
<audio controls id="player" class="hidden">
<source src="" type="audio/ogg" id="oggSource"></source>
<source src="" type="audio/mp3" id="mp3Source"></source>
Your browser does not support the audio element.
</audio>
<!-- /.hidden audio controls -->
</body>
CSS
.hidden{
display: none;
}
.slider{
width:65%;
display: block;
text-align:bottom;
margin-top: 24px;
}
JavaScript
//Problem, I believe, is in this block.
var manualSeek = false;
function rebindSlider(sliderDiv) {
var createSeek = function() {
sliderDiv.slider({
value: 0,
step: 1,
orientation: "horizontal",
range: "min",
max: audioPlayer.duration,
animate: true,
slide: function() {
manualSeek = true;
},
stop: function(e, ui) {
manualSeek = false;
audioPlayer.currentTime = ui.value;
}
});
};
createSeek();
$(audioPlayer).bind('timeupdate', function() {
if (!manualSeek) {
sliderDiv.slider('value', audioPlayer.currentTime);
}
});
}
//--Everything below here is working well enough
var playButton = $(".playButton");
var audioPlayer = $("#player").get(0);
audioLoaded = false;
$('.song').click(function() {
loadSong($(this));
changeUI($(this));
playButton.click();
});
function changeUI(selectedSong) {
playButton.removeClass('fa-pause-circle-o');
playButton.addClass('fa-play-circle-o');
var sliderDiv = selectedSong.parent().find('.slider');
rebindSlider(sliderDiv);//Bind the desired slider
$('.slider').hide(); //Hide all sliders
sliderDiv.show();//Show only the desired slider
}
$(".playButton").click(function() { //Play / Pause song
if (audioLoaded === true) {
if (!audioPlayer.paused) {
audioPlayer.pause();
playButton.removeClass('fa-pause-circle-o');
playButton.addClass('fa-play-circle-o');
} else {
audioPlayer.play();
playButton.removeClass('fa-play-circle-o');
playButton.addClass('fa-pause-circle-o');
}
} else {
alert("Please click a song"); //TODO first song autoloads. not in this fiddle though.
}
return false;
}); //_____________________________________________________________
function loadSong(clickedSong) {
audioLoaded = true;
oggSource.src = 'http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg';
audioPlayer.load();
}...