CODEWITHSUNDEEP
javascripthtmlaudioweb-audio-api
elwood
elwood

Reputation: 7

How do I stop my HTML5/JavaScript audio tracks from playing at the same time

I have an audio track that is inside a loop (whenever someone posts a new track), and so multiple audio tracks will be put on the page. This is the html for what gets outputted onto the page:

<html>
<div class='wrap'>

    <audio id='music' preload='true'>
        <source src='$file' type='audio/mpeg'>
    </audio>

    <div class='player paused'>

    <div class='progress-bar'>
        <div class='runner'></div>
    </div>

    <div class='description'>
    <div class='title'>Something from nothing</div>
    <div class='sub-title'>by $username</div>
    </div>

    <div class='visualizer'>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div> <div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div><div></div>
                                </div>

    <div class='play-button'>
    div class='lp-background'></div>
    <i class='fas fa-play' id='playpress></i>                         
    </div>

    <div class='time-indicator'>
    <i class='fas fa-clock'></i>
    <span class='time'>03:39</span>
    </div>

    </div>
    </div>
</div>
</html>

All those divs are for the animation bars, heres my JavaScript:

var $visualizers = $('.visualizer>div');
var $progressBar = $('.progress-bar');
var $progressBarRunner = $progressBar.find('.runner');
var songLength = 219; //in seconds
var percentage = 0
var $time = $('.time');
var $player = $('.player');

var playRunner = null;

function go() {
playRunner = setInterval(function() {
//visualizers
$visualizers.each(function() {
  $(this).css('height', Math.random() * 90 + 10 + '%');
});
//progress bar
percentage += 0.15;
if (percentage > 100) percentage = 0;
$progressBarRunner.css('width', percentage + '%');

$time.text(calculateTime(songLength, percentage));
}, 250);
};

$('.play-button').on('click', function() {
$player.toggleClass('paused').toggleClass('playing');
if (playRunner) {
clearInterval(playRunner);
playRunner = null;
$time.text(calculateTime(songLength, 100));
} else {
percentage = 0;
go();
}
});

$('.progress-bar').on('click', function(e) {
var posY = $(this).offset().left;
var clickY = e.pageX - posY;
var width = $(this).width();

percentage = clickY / width * 100;
});

function calculateTime(songLength, percentage) {
//time
var currentLength = songLength / 100 * percentage;
var minutes = Math.floor(currentLength / 60);
var seconds = Math.floor(currentLength - (minutes * 60));
if (seconds <= 9) {
return (minutes + ':0' + seconds);
} else {
return (minutes + ':' + seconds);
}
}

clearInterval(playRunner);

My problem is that when I press the play button on one of the tracks, they all start playing at the same time. I want to make it to where only one track plays at a time when it is clicked. I'm not sure if it's something I can change in the html or javascript files, or if I just go about it a different way.

Upvotes: 0

Views: 289

Answers (1)

owlcode
owlcode

Reputation: 51

In HTML id attribute should be unique. Try to remove id='music'.

Upvotes: 1

Related Questions