我如何在 wavesurfer.js 上播放区域和 "only the region"？

Question

我想播放以下代码指定的区域；不是整个 mp3 文件。这对我目前正在进行的项目很有用；我正在建立一个电子商务商店。我希望客户仅在他们可以购买之前流式传输该部分。

//Draws the waveform
var wavesurfer = WaveSurfer.create({
    container       : '#waveform',
    barWidth        : 3,
    barHeight       : 2,
    fillParent      : true,
    hideScrollbar   : true,
    responsive      : true,
    height          : 50,
    waveColor       : '#cccccc',
    progressColor   : '#666666',
    cursorColor     : 'white',
    cursorWidth     : 2,
    //Creates the region I want to play
    plugins: [
        WaveSurfer.regions.create({
            regions: [
                {
                    start: 60,
                    end: 80,
                    loop: false,
                    color: '#cccccc'
                }
            ]
        })
    ]
    
});
//Play and pause buttons
wavesurfer.on('play', function () {
    document.getElementById("playButton").innerHTML = "<i class='material-icons'>pause</i>";
});
wavesurfer.on('pause', function () {
    document.getElementById("playButton").innerHTML = "<i class='material-icons'>play_arrow</i>";
});
//Play and pause function
function togglePlay()
{
    if(wavesurfer.isPlaying())
        wavesurfer.pause();
    else
        wavesurfer.play();
}
//Adds the audio file
var myElement = document.getElementById('my-element');
var myVar = myElement.dataset.myVar;
wavesurfer.load(myVar);
//Hides preloader when waveform is drawn and display the length (duration of the song) 
wavesurfer.on('ready', function () {
    document.getElementById("preloader-cover").style.display = "none";
    var getDuration = wavesurfer.getDuration();
    var min = parseInt(getDuration / 60);
    var sec = (getDuration % 60).toFixed(0);
    var duration = min+":"+sec;
    document.getElementById("length").innerHTML = duration;
});

Answer 1

为您所在的地区提供一个 ID：

plugins: [
    WaveSurfer.regions.create({
        regions: [
            {
                id: "your id",   
                start: 60,
                end: 80,
                loop: false,
                color: '#cccccc'
            }
        ]
    })
]

然后在这个区域调用播放方法：

wavesurfer.regions.list["your id"].play()

这将从该区域的开始到该区域的 "end" 播放该区域。有关更多文档，请查看： wavesurfer region plugin doc

我如何在 wavesurfer.js 上播放区域和 "only the region"？

How do I play a region and "only the region" on wavesurfer.js?

javascript

wavesurfer.js