Hola quería saber si es posible generar un rutina en jquery para darle play y stop a la animación de la onda de música, si ambos jquery que adjunte como ejemplo se pueden integrar..
var elem = $('.musica');
var count = elem.length;
var loop = function(){
setTimeout(function(){
elem.each(function(){
var $this = $(this);
var height = (Math.random() * 30) + 1;
$this.css({
'background': 'linear-gradient(to top, rgba(61, 175, 5,'+(.75-($this.index()/count)/2)+'),yellow)',
'bottom': height,
'height': height
});
});
loop();
}, 300);
}
loop();
$('#play').on('click', function(event) {
console.log('play click clicked');
$('#pause').show();
$('#play').hide();
});
$('#pause').on('click', function(event) {
$('#pause').hide();
$('#play').show();
});
.musica {
background: #000;
float: left;
height: 1px;
margin: 20px 1px 0 0;
position: relative;
transition: all linear 300ms;
width: 2px;
-webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.35, transparent), to(white));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="play-stop-mobile hidden-sm hidden-md hidden-lg">
<a href="#" id="play">
<i class="fa fa-play-circle-o" aria-hidden="true"></i>
</a>
<a href="#" id="pause" style="display: none;">
<i class="fa fa-stop-circle-o" aria-hidden="true"></i>
</a>
</div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>
<div class="musica"></div>