[EDIT: I FITFO on my own, lol – see reply I wrote here]
Ok so I'm going crazy with this for weeks now …
I have multiple instances of Wavesurfer player on my Drupal site. When I click "play" on one, I want any other currently playing Wavesurfer instances to pause.
I have tried everything I could find, but I can't get it to work.
This is how Drupal implements Wavesurfer:
(function ($, Drupal) {
'use strict';
Drupal.AudiofieldWavesurfer = {};
Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
$.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
var wavesurfer = WaveSurfer.create({
container: '#' + $(wavecontainer).attr('id') + ' .waveform',
audioRate: settings.audioRate,
autoCenter: settings.autoCenter,
barGap: settings.barGap,
barHeight: settings.barHeight,
barWidth: settings.barWidth,
cursorColor: settings.cursorColor,
cursorWidth: settings.cursorWidth,
forceDecode: settings.forceDecode,
normalize: settings.normalize,
progressColor: settings.progressColor,
responsive: settings.responsive,
waveColor: settings.waveColor
});
wavesurfer.load(file.path);
wavesurfer.setVolume(1);
$(wavecontainer).find('.player-button.playpause').on('click', function (event) {
Drupal.AudiofieldWavesurfer.PlayPause(wavecontainer, wavesurfer);
});
$(wavecontainer).find('.volume').on('change', function (event) {
wavesurfer.setVolume($(event.currentTarget).val() / 10);
});
if (!!settings.autoplay) {
wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));
}
});
};
Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {
wavesurfer.playPause();
var button = $(wavecontainer).find('.player-button.playpause');
if (wavesurfer.isPlaying()) {
$(wavecontainer).addClass('playing');
button.html('<i class="fas fa-pause-circle fa-2x"></i>');
} else {
$(wavecontainer).removeClass('playing');
button.html('<i class="fas fa-play-circle fa-2x"></i>');
}
};
And this is how I'm currently trying to pause all others:
document.addEventListener('playPause', function(e){
var audios = document.getElementsByClassName('audiofield-wavesurfer');
for(var i = 0, len = audios.length; i < len; i++){
if(audios[i] != e.target && audios[i].hasClass('playing')){
audios[i].playPause();
}
}
}, true);
It seems this won't work (have been reading into Drupal.behaviours and tried modifying that part, also no luck.
I have also tried just letting the PlayPause function run through every player when clicked like this:
Drupal.AudiofieldWavesurfer.PlayPause = function (wavecontainer, wavesurfer) {
$.each($(Drupal.AudiofieldWavesurfer), function() {
wavesurfer.playPause();
var button = $(wavecontainer).find('.player-button.playpause');
if (wavesurfer.isPlaying()) {
$(wavecontainer).addClass('playing');
button.html('<i class="fas fa-pause-circle fa-2x"></i>');
} else {
$(wavecontainer).removeClass('playing');
button.html('<i class="fas fa-play-circle fa-2x"></i>');
}
})};
… or here:
Drupal.AudiofieldWavesurfer.generate = function (context, file, settings) {
$.each($(context).find('#' + file.id).once('generate-waveform'), function (index, wavecontainer) {
var wavesurfer = WaveSurfer.create({
container: '#' + $(wavecontainer).attr('id') + ' .waveform',
audioRate: settings.audioRate,
autoCenter: settings.autoCenter,
barGap: settings.barGap,
barHeight: settings.barHeight,
barWidth: settings.barWidth,
cursorColor: settings.cursorColor,
cursorWidth: settings.cursorWidth,
forceDecode: settings.forceDecode,
normalize: settings.normalize,
progressColor: settings.progressColor,
responsive: settings.responsive,
waveColor: settings.waveColor
});
wavesurfer.load(file.path);
wavesurfer.setVolume(1);
// ---- HERE MY CODE: --------
$(wavecontainer).find('.player-button.playpause').on('click', function (event) {
$.each($(context).find('#' + file.id), function(idx, obj) {
$(obj).stop();
});
Drupal.AudiofieldWavesurfer.PlayPause($(wavecontainer), wavesurfer);
});
but all that didn't work either for me … does anybody have any idea how to help me figure this out? would save my life!!!