Приостановить звук внутри контейнера, когда выбран новый контейнер - PullRequest
Новая
       11

Приостановить звук внутри контейнера, когда выбран новый контейнер

1 голос
/ 12 июня 2019

Я использую карту SVG для отображения нескольких звуковых дорожек при выборе состояния. Используемый мной анимированный аудиопроигрыватель передает звук через элемент canvas, поэтому я не могу использовать традиционный таргетинг $ ('audio'). Pause, чтобы приостановить воспроизведение звука. Я должен сделать что-то вроде ak.audio.pause (); нацелившись на экземпляр js, который я создал.

Самое сложное - это запустить аудио проигрыватель при воспроизведении другого аудио плеера. Я очень новичок в том, что аудио помещено на холст вне HTML.

Я использую код кругового аудиоплеера отсюда. https://codepen.io/jhereg00/pen/WjQPdW

Я должен признаться, что это моя первая публикация в stackoverflow, даже после того, как я много лет полагался на нее, чтобы выполнять свою реальную работу. Наконец-то я здесь, чтобы узнать, смогу ли я получить помощь по моему любимому проекту.

Я пробовал нацеливаться с помощью традиционных аудио-методов jquery, я пробовал щелкнуть триггером, добавить класс, удалить класс, использовать play / pause, нацеливаясь на элемент canvas, но это не работает.

Инициирует аудио экземпляр. 

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);

Это вывод инициализации. 

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

Это показывает сторону, которая содержит экземпляр, когда вы нажимаете на состояние. 

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

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

Вы можете увидеть все мои работы здесь https://codepen.io/ClarenceS/pen/pXvEeX

Я не получаю сообщение об ошибке из консоли.

...