Question

我正在使用带有区域插件的wavesurfer库。我想在播放它的区域上方添加一个按钮。但是，按钮不应位于区域内，因为这也会触发regio-click事件。

我尝试使用CSS transform: translateY使其显示在区域上方，但当按钮滑过该区域时，它变得不可见。正如您在demo中看到的，只有红色播放按钮的下半部分可见。我也试图增加Z指数，但无济于事。请注意，按钮需要绑定到region元素，这样当移动/调整区域时，它也会移动。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.regions.min.js"></script>
<h2>wave</h2>
<div id="waveform"></div>
<p align="center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    <i class="glyphicon glyphicon-play"></i>
    Play
  </button>
</p>

JS：

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet'
});

wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

wavesurfer.on('ready', function() {
    wavesurfer.on('region-created', function(reg) {
        const regElem = $('region[data-id="' + reg['id'] + '"]')[0];
        const playRegion = regElem.appendChild(document.createElement('i'));
        playRegion.className = "glyphicon glyphicon-play";
        playRegion.style = "color: red; transform: translateY(-8px)";
        playRegion.addEventListener('click', function() {
            wavesurfer.play(reg['start'], reg['end']);
       });
   });

  wavesurfer.addRegion({
    start: 2, // time in seconds
    end: 5, // time in seconds
    color: 'hsla(100, 100%, 30%, 0.1)'
  });

});

<i>元素在区域

0 个答案: