Problem with Play/pause action on two Wavesurfer player

user_11499271 0
Viewed 518

$(document).ready(function() {

"use strict";

if ($('#waveform1').length) {
    var wavesurfer1 = WaveSurfer.create({
        container: '#waveform1',
        waveColor: '#0E61B4',
        progressColor: '#30A5E0',
        fillParent: false,
        minPxPerSec: 10,
        height: 85,
        barMinHeight: 26,
        hideScrollbar: true,
        cursor: true,
        responsive: true,
    });
    // Load an audio file
    var song = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3';
    wavesurfer1.load(song);
    waveform1.getElementsByTagName("wave")[1].style.border = 'none';
    // change icon and paues and play song
    $(".controls-waveform1 .button-play-audio").on('click', function() {
        if (wavesurfer1.isPlaying()) {
            wavesurfer1.pause();
            playSong1.style.display = "block";
            pauseSong1.style.display = "none";
        } else {
            wavesurfer1.play();
            playSong1.style.display = "none";
            pauseSong1.style.display = "block";
        }
    });
}



//  WaveSurfer2
if ($('#waveform2').length) {
    var wavesurfer2 = WaveSurfer.create({
        container: '#waveform2',
        waveColor: '#0E61B4',
        progressColor: '#30A5E0',
        fillParent: false,
        minPxPerSec: 10,
        height: 85,
        barMinHeight: 26,
        hideScrollbar: true,
        cursor: true,
        responsive: true,
    });
    // Load an audio file
    var song2 = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3';
    wavesurfer2.load(song2);
    waveform2.getElementsByTagName("wave")[1].style.border = 'none';
    // change icon and paues and play song
    $(".controls-waveform2 .button-play-audio").on('click', function() {
        if (wavesurfer2.isPlaying()) {
            wavesurfer2.pause();
            playSong2.style.display = "block";
            pauseSong2.style.display = "none";

        } else {
            wavesurfer2.play();
            playSong2.style.display = "none";
            pauseSong2.style.display = "block";
        }
    });
}

The code works fine and everything is fine, but I want the second sound to play and the first sound to be paused if it's already playing. I just want one of them to work and not to get played together. [1]: https://i.stack.imgur.com/Ou1me.png

web-frontend wavesurfer.js frontend jquery javascript
1 Answers

So as I understand your question, you have two separate Wavesurfer player (and also two separate play/pause button for each) and you don't want both of them to play at the same time (each player at a time). That's fine, you just need to pause the waveform1 when the waveform2 is playing and vice versa. You have 2 way to achive this.

Solution 1

Let's replace the click events on your code.

On your first player :

$(".controls-waveform1 .button-play-audio").on('click', function() {
        if (wavesurfer1.isPlaying()) {
            wavesurfer1.pause();
            playSong1.style.display = "block";
            pauseSong1.style.display = "none";
        } else {
            wavesurfer2.pause(); // ------ ADD THIS ------

            wavesurfer1.play();
            playSong1.style.display = "none";
            pauseSong1.style.display = "block";
        }
});

also On your second player:

$(".controls-waveform2 .button-play-audio").on('click', function() {
        if (wavesurfer2.isPlaying()) {
            wavesurfer2.pause();
            playSong2.style.display = "block";
            pauseSong2.style.display = "none";

        } else {
            wavesurfer1.pause();  // ------ ADD THIS ------

            wavesurfer2.play();
            playSong2.style.display = "none";
            pauseSong2.style.display = "block";
        }
});

Here is an example

Solution 2

Listen to the play event on one player and pause the other one:

wavesurfer1.on('play', function () {
    wavesurfer2.pause();
});

wavesurfer1.on('play', function () {
    wavesurfer1.pause();
});
user_93488860
Related