javascript - Wavesurfer js，选择具有可选jQuery的区域(wavesurfer js, select regions with jquery selectable)

Question

Hi all and thank you for this amazing website.

(大家好，谢谢您提供的出色网站。)

I use it everyday to solve many problem!

(我每天都用它来解决许多问题！)

I would like to selec regions in wavesurfer.js with jquery selectable (select with mouse on the div #waveform).

(我想用可选择的jquery选择waveurfer.js中的区域（在div #waveform上用鼠标选择）。)

It's works but I have a conflict beetween codes [2] and [3] .

(它可以工作，但是代码[2]和[3]之间存在冲突。)

When I activate the code [3] , [2] stop (on Google Chrome) or require two or three clics to reload the timing [2] (Firefox).

(当我激活代码[3]时 ， [2]停止（在Google Chrome上），或者需要两个或三个clic重新加载计时[2] （Firefox）。)

I think the problem comes from #waveform (DOM element) because it is used by both.

(我认为问题来自#waveform（DOM元素），因为两者都使用了它。)

How could I solve this probleme or create priorites?

(我该如何解决这个问题或创建优先级？)

Thank you!

(谢谢！)

1 Example from wavesurfer.js

(1个来自waveurfer.js的示例)

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    waveColor: '#A8DBA8',
    progressColor: '#3B8686',
    backend: 'MediaElement',
    plugins: [
        WaveSurfer.regions.create({
            regions: [
                {
                    start: 1,
                    end: 3,
                    loop: false,
                    color: 'hsla(400, 100%, 30%, 0.5)'
                }, {
                    start: 5,
                    end: 7,
                    loop: false,
                    color: 'hsla(200, 50%, 70%, 0.4)'
                }
            ],
            dragSelection: {
                slop: 5
            }
        })
    ]
});

wavesurfer.load('music.mp3');

[2] Function to get the timing when I click on the wave.

([2]用于在我单击波浪时获取时间的功能。)

wavesurfer.on('seek', function (position) {
    var currentTime = position * wavesurfer.getDuration();
    $('#waveformcounter').text(currentTime);
});

[3] Function to select many regions at the same time:

([3]用于同时选择多个区域的功能：)

$( "#waveform" ).selectable({
    stop: function(event) {
      var result = $( "#subtitle" ).empty();
      $( ".ui-selected", this ).each(function() {
        var index = $( "#waveform region" ).index( this );
        if(index > 0)
            result.append( ( index + 1 ) + ' ');
      });
    }});

  ask by Tedz translate from so

Answer 1

等待大神答复