两个 Wavesurfer 播放器的播放/暂停操作问题

问题描述

$(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',});
    // 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";
        }
    });
}

代码运行良好，一切正常，但我希望播放第二个声音，如果第一个声音已经在播放，则暂停它。我只是想让其中一个工作，而不是一起玩。 [1]：https://i.stack.imgur.com/Ou1me.png

解决方法

所以我理解你的问题，你有两个单独的 Wavesurfer 播放器（每个播放器都有两个单独的播放/暂停按钮），并且你不希望它们同时播放（每个播放器一次） .没关系，您只需要在播放波形 2 时 pause 波形 1，反之亦然。 您有两种方法可以实现这一目标。

解决方案 1

让我们替换代码中的 click 事件。

在您的第一个播放器上：

$(".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";
        }
});

也在你的第二个播放器上：

$(".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

解决方案 2

收听一位玩家和play另一位玩家的 pause 事件：

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

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