Pause audio inside a container when a new container is selected

Question

I'm using an svg map to display multiple audio tracks when a state is selected. The animated audio player I'm using brings audio through a canvas element so I can't use traditional targeting $('audio').pause to pause playing audio. I have to do something like ak.audio.pause(); by targeting the js instance I created.

The tricky part is want the audio to start player when a another audio player is played. I'm super new to having audio placed in a canvas outside of html.

I'm using the circle audio player code from here. https://codepen.io/jhereg00/pen/WjQPdW

I have to confess this is my first time posting on stackoverflow even after relying on it for many years to do my actual job. I'm finally here posting to see if i can get help on a pet project of mine.

I've tried targeting through the traditional jquery audio methods, I've tried trigger click, adding class, removing class, using play/pause by targeting the canvas element, but it doesnt work.

Initiates the audio instance.

var ar = new CircleAudioPlayer({
    audio: 'http://www.lefty.co/audio/mp3music/America_AR_SallySockwell.mp3',
  size: 120,
  borderWidth: 8
});
ar.appendTo(arContainerOne);

var ar2 = new CircleAudioPlayer({
    audio: 'http://www.lefty.co/audio/mp3music/America_AR_MelissaWalsh.mp3',
  size: 120,
  borderWidth: 8
});
ar2.appendTo(arContainerTwo);

This is the output of the init.

<div id="arContainerOne"><canvas class="circle-audio-player is-paused" width="120" height="120"></canvas></div>

This shows the aside that contains the instance when you click on the state.

$('.content-box aside').hide();

$('path').on('click', function() {
    var state = $(this).attr('id');
    $('aside#' + state).toggle().siblings("aside").hide();
});

You can see all my work here https://codepen.io/ClarenceS/pen/pXvEeX

I don't get an error message from console.

Pause audio inside a container when a new container is selected

0 Answers0