Wavesurfer.js : 맞춤 마커를 표시하는 방법?

Question

내 새 웹 페이지의 경우 웨이브 형식의 오디오 플레이어를 통합해야하며 wavesurfer.js 패키지를 사용하고 있습니다. 그들이 웨이브 폼의 다른 위치에 맞춤 마커를 추가하는 것에 대해 말하면서 지금까지 작동하지 못했습니다. 내 코드는 다음과 같습니다 :

'use strict'; 

// Create an instance 
var wavesurfer = Object.create(WaveSurfer); 

// Init & load audio file 
document.addEventListener('DOMContentLoaded', function() { 
var options = { 
    container  : document.querySelector('#waveform'), 
    waveColor  : 'violet', 
    progressColor : 'purple', 
    loaderColor : 'purple', 
    cursorColor : 'navy' 
}; 

if (location.search.match('scroll')) { 
    options.minPxPerSec = 100; 
    options.scrollParent = true; 
} 

if (location.search.match('normalize')) { 
    options.normalize = true; 
} 

// Init 
wavesurfer.init(options); 
// Load audio from URL 
wavesurfer.load('example/media/demo.wav'); 


// Regions 
if (wavesurfer.enableDragSelection) { 
    wavesurfer.enableDragSelection({ 
     color: 'rgba(0, 255, 0, 0.1)' 
    }); 
} 
}); 

// Play at once when ready 
wavesurfer.on('ready', function() { 
wavesurfer.play(); 
wavesurfer.mark({id: 'chorus', position: 10}) 
}); 

그리고 콘솔에서 아래와 같은 오류가 점점 :

Uncaught TypeError: undefined is not a function 

은 아무도 이것에 대한 해결책을 제시 할 수 있습니까?

Answer 1

일부 해결책을 찾았다면 모르겠지만 지역으로 표시 할 수 있습니다. 대신 지역 코드의 아래에 추가

// Region 
if (wavesurfer.enableDragSelection) { 
    region = wavesurfer.addRegion({ 
    start: 5, 
    end: 5 + 0.5, 
    resize: false, 
    drag: false, 
    color: 'rgba(255,0,0, 0.7)' 
    }); 
} 

Answer 2

당신은이 작업을 얻을 수있는 오디오의 초기화 후 준비에 호출하여

wavesurfer.on('ready', function() { 

        // Adding a couple of pre-defined regions 
        wavesurfer.addRegion({ 
         start: 5, // time in seconds 
         end: 8, // time in seconds 
         color: 'hsla(100, 100%, 30%, 0.1)' 
        });