var player, is_paused;
soundManager.setup({
onready: function(){
is_paused = false;
player = soundManager.createSound({
url: 'http://alvaroveliz.cl/uploads/2016/03/Mixtape_Vol_04.mp3'
});
}
});
$(document).ready(function(){
// funcion play / pausa
$('.buttons-play').on('click', function(){
$('.title').html('755 // Mixtape Vol 04');
if (is_paused) {
player.play();
is_paused = false;
$('.buttons-play span').removeClass('fa-play');
$('.buttons-play span').addClass('fa-pause');
} else {
player.pause();
is_paused = true;
$('.buttons-play span').removeClass('fa-pause');
$('.buttons-play span').addClass('fa-play');
}
});
// funcion stop
$('.buttons-stop').on('click', function(){
player.stop();
is_paused = false;
$('.title').html('Ejemplo de player');
$('.buttons-play span').removeClass('fa-pause');
$('.buttons-play span').addClass('fa-play');
});
});
<div id="player">
<div class="buttons">
<a href="#" class="buttons-play"><span class="fa fa-play"></span></a>
<a href="#" class="buttons-stop"><span class="fa fa-stop"></span></a>
</div>
<div class="volume-and-time">
<div class="time">00:00 / 00:00</div>
<div class="volume">
<input type="range" name="points" min="0" max="10" value="10">
</div>
</div>
<div class="title">
Ejemplo de player
</div>
</div>
body {
font-family: 'Quicksand', 'Helvetica', sans-serif;
}
#player {
border : 2px solid #ddd;
background: #DDD;
width: 400px;
border-radius: 5px;
padding: 20px;
position: relative;
box-shadow: 1px 1px 1px #444;
.buttons {
a {
display: inline-block;
border: 2px solid #373B41;
position: absolute;
span {
color: #373B41;
}
&.buttons-play {
width: 40px;
height: 50px;
border-radius: 60px;
padding-left: 25px;
padding-top: 15px;
font-size: 2em;
}
&.buttons-stop {
width: 25px;
height: 28px;
border-radius: 40px;
padding-left: 13px;
padding-top: 10px;
top: 35px;
left: 100px;
}
}
}
.volume-and-time {
display: inline-block;
position: absolute;
top: 20px;
right: 20px;
.time {
text-align: right;
color: #999;
}
.volume {
margin-top: 20px;
}
}
.title {
border-top: 1px solid #CC6666;
padding: 10px;
margin-top: 80px;
text-align: center;
}
}
External resources loaded into this fiddle: