How to implement switching of audio?

<div class="item grid" style="background-image: url('{{img}}')">
 <div class="item_music">
 <div class="music_bar">
the <ul>
 the <li><a href="{{itunes}}">ITunes</a></li>
 <li id="{{id}}" class="play">
 <i id="play_music" onclick="document.getElementById('audio{{id}}').play()" class="fa fa-play"></i>
 <i id="pause_music" onclick="document.getElementById('audio{{id}}').pause()" class="fa fa-pause"></i>
 <audio id="audio{{id}}" class="audio_cont" src="{{src}}" onended="$('audio').css('bottom', '-40px'); $('#{{id}}').find('#pause_music').fadeOut(); $('#{{id}}').find('#play_music').fadeIn();" controls></audio>
</li>
 the <li><a href="{{text}}">Text</a></li>
</ul>
</div>
 <p class="text_dec">{{name}}</p>
</div>
</div>

$('.play').each(function() {
 var $play = "#" + String($(this).attr("id"));
$($play).find('#pause_music').hide();
 $($play).on('click', '#play_music', function() { // Enable
 $(this).fadeOut(200, function() {
 $($play).find('audio').css("bottom", 0);
$($play).find('#pause_music').fadeIn(200)
});
});
 $($play).on('click', '#pause_music', function() { // Stop
 $(this).fadeOut(200, function() {
 $($play).find('audio').css("bottom", "-40px");
$($play).find('#play_music').fadeIn(200);
});
});
});


How to make when you enable the following audio current stayed
June 10th 19 at 14:34
0 answer

Find more questions by tags jQueryJavaScript