如何在 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()

这将使该地区从开始到结束。有关更多文档，请查看：wavesurfer区域插件doc