Почему wavesurfer js переполняет родительский div - PullRequest
Новая
       54

Почему wavesurfer js переполняет родительский div

7 голосов
/ 18 марта 2020

У меня проблема с wavesurferjs

Переполнение родительского div

Это происходит впервые и при изменении размера родительского div

On изменить размер он должен соответствовать родительский div

Вопрос: при изменении размера родительского элемента div waveform должен приспособиться для размещения

это показано на изображении ниже:

enter image description here

вот мой код: 

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
//   waveColor: 'violet',
  waveColor: '#5B88C8',
  progressColor: '#264E73',
  hideScrollbar: true,
  cursor: false,
  drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');


wavesurfer.enableDragSelection({
  drag: false,
  slop: 1,
  loop : false,
});

wavesurfer.on('region-created', function (region) {
  console.log(region.start, region.end);
});


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

        wavesurfer.addRegion({
            start: 0, // time in seconds
            end: wavesurfer.getDuration(), // time in seconds
            color: 'hsla(100, 100%, 30%, 0.1)',
            loop: false,
            multiple: false,
            drag: false
        });
})




document.querySelectorAll('wave').forEach(function(wave){
      wave.addEventListener('mousedown', function(e) {
        e.preventDefault();
        wavesurfer.clearRegions();
      });
  });


$('.toggle-width').on('click',function(){
   var width = $('#wavesurferContainer').width();
   width = width - 120;
   $('#wavesurferContainer').width(width + 'px');
});
  handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            /* background: #03A9F4; */
            background: orange;
            cursor: default !important;
       }


      #wavesurferContainer{
        width: calc(100% - 50px);
        border: 1px solid red;
        position: relative;
        margin-top: 56px;
     }

    handle.wavesurfer-handle.wavesurfer-handle-end:before{
        bottom: -17px !important;
        top: unset !important;
    } 

    #waveform{
        margin-top: 10%
    }
    #waveform wave{
        overflow: unset !important;
    }

    span.toggle-width{
       position: relative;
       float: right;
    }
    span.toggle-width:before {
        content: "<";
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        color: #fff;
        font-size: 24px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




  <div id="wavesurferContainer">
        <span class="toggle-width"></span>
        <div id="waveform"></div>
   </div>

Пожалуйста, помогите мне заранее спасибо !!!

Ответы [ 3 ]

6 голосов
/ 20 марта 2020

В документации * волновода упоминаются опции responsive и fillParent, которые должны решить проблему.

reponsive доступно с waveSurfer v2.0.0 ( source ), поэтому необходимо обновление, если вы используете версию 1.2.3, как в примере фрагмента.

Последняя стабильная версия - 3.3.1.

Редактировать , в комментарии упоминается, что npm не используется:

Последние сборки библиотеки можно найти в cdns:

Edit2: Как задокументировано :

Вам необходимо включить конфигурацию плагина при создании экземпляра WaveSurfer: 

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    plugins: [
        WaveSurfer.regions.create({})
    ]
});

Регистрация плагина во время создания waveurfer решает проблему, как показано в фрагменте ниже. 

var wavesurfer = WaveSurfer.create({
      container: '#waveform',
    //   waveColor: 'violet',
      waveColor: '#5B88C8',
      progressColor: '#264E73',
      hideScrollbar: true,
      cursor: false,
      drag: false,
    plugins: [
        WaveSurfer.regions.create({})
    ]
    });
    wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');


		const resizeObserver = new ResizeObserver(entries => {
			for (let entry of entries) {
			   wavesurfer.empty();
			   wavesurfer.drawBuffer();
           var regs = Object.values(wavesurfer.regions.list);
           window.setTimeout(() => {
               wavesurfer.regions.clear();
               var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
			       regs.forEach(e => wavesurfer.addRegion(clear(e)));
           }, 100);
			   
			   
			}
		});

    wavesurfer.enableDragSelection({
      drag: false,
      slop: 1,
      loop : false,
    });

    wavesurfer.on('region-updated', function (region) {
      console.log(region.start, region.end);
    });


    wavesurfer.on('ready', function (readyObj) {
            resizeObserver.observe($('#wavesurferContainer')[0])
            wavesurfer.addRegion({
                start: 0, // time in seconds
                end: wavesurfer.getDuration(), // time in seconds
                color: 'hsla(100, 100%, 30%, 0.1)',
                loop: false,
                multiple: false,
                drag: false
            });
    })




    document.querySelectorAll('wave').forEach(function(wave){
          wave.addEventListener('mousedown', function(e) {
            e.preventDefault();
            wavesurfer.clearRegions();
          });
      });




    $(document).on('click','.toggle-width',function(){
       console.log('clicked');
       var width = $('#wavesurferContainer').width();
       width = width - 120;
       $('#wavesurferContainer').width(width + 'px');
       // you can put here implementation of our redraw.
    });
handle.wavesurfer-handle{
            width: 9% !important;
            max-width: 7px !important;
            /* background: #03A9F4; */
            background: orange;
            cursor: default !important;
       }


      #wavesurferContainer{
        width: calc(100% - 50px);
        border: 1px solid red;
        position: relative;
        margin-top: 56px;
     }

    handle.wavesurfer-handle.wavesurfer-handle-end:before{
        bottom: -17px !important;
        top: unset !important;
    } 

    #waveform{
        margin-top: 10%
    }
    #waveform wave{
        overflow: unset !important;
    }

    span.toggle-width{
       position: relative;
       float: right;
    }
    span.toggle-width:before {
        content: "<";
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 29px;
        color: #fff;
        font-size: 24px;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/wavesurfer.min.js"></script>

<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>




  <div id="wavesurferContainer">
        <span class="toggle-width"></span>
        <div id="waveform"></div>
   </div>
3 голосов
/ 22 марта 2020

Я нашел исправление для вашей текущей версии waveurfer. js.

Все, что я сделал, это обновил размер ящика и вызвал перерисовку method при изменении ширины контейнера. Но тогда регионы не обновляются. Поэтому я перенес текущие значения регионов в переменную temp и удалил регионы и перерисовал. Теперь область будет в правильном положении и правильном размере.

Следующая проблема заключалась в том, что ручка перемещается из контейнера, и область начинает вести себя как сумасшедшая. Вы можете исправить это простым css трюком, применив следующий код css.

Надеюсь, это поможет. 

handle.wavesurfer-handle-end{
  transform: translateX(-100%);
}

Вот фрагмент рабочего решения. 

$('document').ready(function() {
  var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    //   waveColor: 'violet',
    waveColor: '#5B88C8',
    progressColor: '#264E73',
    hideScrollbar: true,
    cursor: false,
    drag: false
  });
  wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
  wavesurfer.enableDragSelection({
    drag: false,
    slop: 1,
    loop: false,
  });
  wavesurfer.on('region-created', function(region) {
    console.log(region.start, region.end);
  });
  wavesurfer.on('ready', function(readyObj) {
    wavesurfer.addRegion({
      start: 0, // time in seconds
      end: wavesurfer.getDuration(), // time in seconds
      color: 'hsla(100, 100%, 30%, 0.1)',
      loop: false,
      multiple: false,
      drag: false
    });
  })
  document.querySelectorAll('wave').forEach(function(wave) {
    wave.addEventListener('mousedown', function(e) {
      e.preventDefault();
      wavesurfer.clearRegions();
    });
  });
  $('.toggle-width').on('click', function() {
    var width = $('#wavesurferContainer').width();
    width = width - 120;
    $('#wavesurferContainer').width(width + 'px');

    wavesurfer.drawer.updateSize();
    wavesurfer.drawBuffer();
    
    var region_list = wavesurfer.regions.list;
    var region_keys = Object.keys(region_list);
    region_keys.map(function(key){
      var temp_region = {
        start: region_list[key].start, // time in seconds
        end: region_list[key].end, // time in seconds
        color: region_list[key].color,
        loop: region_list[key].loop,
        multiple: region_list[key].multiple,
        drag: region_list[key].drag
      };
      region_list[key].remove();
      wavesurfer.addRegion(temp_region);
    });
  });
});
handle.wavesurfer-handle {
    width: 9% !important;
    max-width: 7px !important;
    /* background: #03A9F4; */
    background: orange;
    cursor: default !important;
}
handle.wavesurfer-handle-end{
  transform: translateX(-100%);
}
#wavesurferContainer {
    position: relative;
    width: calc(100% - 50px);
    border: 1px solid red;
    position: relative;
    margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before {
    bottom: -17px !important;
    top: unset !important;
}
#waveform {
    position: relative;
    margin-top: 10%
}
#waveform wave {
    overflow: unset !important;
}
span.toggle-width {
    position: relative;
    float: right;
}
span.toggle-width:before {
    content: "<";
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 29px;
    color: #fff;
    font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js">
</script>
<div id="wavesurferContainer">
    <span class="toggle-width">
    </span>
    <div id="waveform">
    </div>
</div>
3 голосов
/ 20 марта 2020

В вашей версии этой библиотеки нет такой функциональности, но вы все еще можете реализовать такую. Ниже рабочий пример. Ключевым моментом здесь является принудительное изменение буфера (здесь drawBuffer()). Регионы - это отдельная вещь, и мы просто удаляем и добавляем их вручную после перерисовки (не уверен, что лучшая идея ... но работает). 

//this needs to be called after resize!
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
wavesurfer.regions.clear();
regs.forEach(e => wavesurfer.addRegion(e));

этот фрагмент должен вызываться при каждом изменении размера контейнера. Здесь мы вызываем его сразу после такого изменения кода, но в большинстве случаев это будет невозможно, тогда вы должны использовать ResizeObserver для обработки этого.

Чтобы сохранить области в контейнере, добавьте такие css: 

.wavesurfer-region {
    max-width: 100%;
}


    var wavesurfer = WaveSurfer.create({
      container: '#waveform',
    //   waveColor: 'violet',
      waveColor: '#5B88C8',
      progressColor: '#264E73',
      hideScrollbar: true,
      cursor: false,
      drag: false
    });
    wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');


	const resizeObserver = new ResizeObserver(entries => {
		for (let entry of entries) {
		   wavesurfer.empty();
		   wavesurfer.drawBuffer();
           var regs = Object.values(wavesurfer.regions.list);
           window.setTimeout(() => {
               wavesurfer.regions.clear();
               var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
		       regs.forEach(e => wavesurfer.addRegion(clear(e)));
           }, 100);
		   
		   
		}
	});

    wavesurfer.enableDragSelection({
      drag: false,
      slop: 1,
      loop : false,
    });

    wavesurfer.on('region-updated', function (region) {
      console.log(region.start, region.end);
    });


    wavesurfer.on('ready', function (readyObj) {
            resizeObserver.observe($('#wavesurferContainer')[0])
            wavesurfer.addRegion({
                start: 0, // time in seconds
                end: wavesurfer.getDuration(), // time in seconds
                color: 'hsla(100, 100%, 30%, 0.1)',
                loop: false,
                multiple: false,
                drag: false
            });
    })




    document.querySelectorAll('wave').forEach(function(wave){
          wave.addEventListener('mousedown', function(e) {
            e.preventDefault();
            wavesurfer.clearRegions();
          });
      });




    $('.toggle-width').on('click',function(){
       var width = $('#wavesurferContainer').width();
       width = width - 120;
       $('#wavesurferContainer').width(width + 'px');
       // you can put here implementation of our redraw.
    });
      handle.wavesurfer-handle{
                width: 9% !important;
                max-width: 7px !important;
                /* background: #03A9F4; */
                background: orange;
                cursor: default !important;
           }


          #wavesurferContainer{
            width: calc(100% - 50px);
            border: 1px solid red;
            position: relative;
            margin-top: 56px;
         }

        handle.wavesurfer-handle.wavesurfer-handle-end:before{
            bottom: -17px !important;
            top: unset !important;
        } 

        #waveform{
            margin-top: 10%
        }
        #waveform wave{
            overflow: unset !important;
        }

        .wavesurfer-region {
            max-width: 100%;
        }

        span.toggle-width{
           position: relative;
           float: right;
        }
        span.toggle-width:before {
            content: "<";
            position: absolute;
            left: 0;
            top: 0;
            background: red;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 29px;
            color: #fff;
            font-size: 24px;
        }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.js"></script>

    <!-- wavesurfer.js timeline -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div id="wavesurferContainer">
      <span class="toggle-width"></span>
      <div id="waveform"></div>
 </div>
...