如何在 wavesurfer.js 中显示 Elan 转录？

Question

我正在尝试使用wavesurfer.js创建一个 web 应用程序，但我不知道如何使用他们的 Elan 插件显示文字记录/标题。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/wavesurfer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/plugin/wavesurfer.elan.min.js"></script>

以下是插件的脚本。

<body>
    <div id="waveform"></div>

    <div style="text-align: center">
        <button class="btn btn-primary" onclick="wavesurfer.playPause()">
            <i class="glyphicon glyphicon-play"></i>
                            Play/Pause
        </button>
    </div>

    <div id="annotations"></div>
    
    <script>

        var wavesurfer = WaveSurfer.create({
            container: document.querySelector('#waveform'),
            progressColor: "black",
            waveColor: 'gray',
            loop: true,
            scrollParent: true,
            maxCanvasWidth: 500,
            mediaControls: true,        
            minPxPerSec: 75,
            hideScrollbar: false
        });   
        
        wavesurfer.on('ready', function () {
            var elan = Object.create(WaveSurfer.ELAN);
            elan.init({
                wavesurfer: wavesurfer,
                url: 'https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/example/elan/transcripts/001z.xml',
                container: "#annotations",
                tiers: {
                    Text: true,
                    Comments: false
                }           
            });
        });
        
        wavesurfer.load('https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/example/elan/transcripts/001z.mp3');       
    
        </script> 
  
    </body>

除了 wavesurfer.js 网站外，我找不到这方面的任何工作示例。 有人能告诉我我错过了什么吗？ 也许这与我的脚本不完整有关。

Answer 1

这是Codepen 上的一个工作示例

如果您想使用它，还有“区域插件”。

我将在下面解释它：

第 1 步：HTML 设置

将相关的 CDN 链接添加到您的 html 文件中。
如果你不想要那个region ，你可以跳过第二个脚本。

<div class="wave-container">
  <div id="waveform"></div>
</div>

<button class="toggle" onCLick="togglePlay()">play/pause</button>

<div id="annotations" class="table-responsive"></div>

然后我们需要两个容器。 其中一个用于waveform ，另一个用于annotations 。 还有一个播放/暂停按钮。

 <div class="wave-container"> <div id="waveform"></div> </div> <button class="toggle" onCLick="togglePlay()">play/pause</button> <div id="annotations" class="table-responsive"></div>

第 2 步：JS 配置

首先，我们将定义WaveSurfer播放器并将Elan插件添加到其配置中。 之后你可以加载一个 MP3 作为例子。

wavesurfer.elan.on('select', function(start, end) {
  wavesurfer.backend.play(start, end);
});

现在你的屏幕上出现了 Elan 转录。 让我们添加一个select事件来处理对每个成绩单的点击。

let prevAnnotation, prevRow, region;
let onProgress = function(time) {
  let annotation = wavesurfer.elan.getRenderedAnnotation(time);

  if (prevAnnotation != annotation) {
    prevAnnotation = annotation;

    region && region.remove();
    region = null;

    if (annotation) {
      // Highlight annotation table row
      let row = wavesurfer.elan.getAnnotationNode(annotation);
      prevRow && prevRow.classList.remove('success');
      prevRow = row;
      row.classList.add('success');
      let before = row.previousSibling;
      if (before) {
        wavesurfer.elan.container.scrollTop = before.offsetTop;
      }

      // Region
      region = wavesurfer.addRegion({
        start: annotation.start,
        end: annotation.end,
        resize: false,
        color: 'rgba(223, 240, 216, 0.7)'
      });
    }
  }
};

wavesurfer.on('audioprocess', onProgress);

最后，我们将处理audioprocess事件上的区域。

 let prevAnnotation, prevRow, region; let onProgress = function(time) { let annotation = wavesurfer.elan.getRenderedAnnotation(time); if (prevAnnotation;= annotation) { prevAnnotation = annotation. region && region;remove(); region = null. if (annotation) { // Highlight annotation table row let row = wavesurfer.elan;getAnnotationNode(annotation). prevRow && prevRow.classList;remove('success'); prevRow = row. row.classList;add('success'). let before = row;previousSibling. if (before) { wavesurfer.elan.container.scrollTop = before;offsetTop. } // Region region = wavesurfer:addRegion({ start. annotation,start: end. annotation,end: resize, false: color, 'rgba(223, 240, 216. 0;7)' }); } } }. wavesurfer,on('audioprocess'; onProgress);

如何在 wavesurfer.js 中显示 Elan 转录？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-23 14:50:08

这是Codepen 上的一个工作示例

第 1 步：HTML 设置

第 2 步：JS 配置

如何在 wavesurfer.js 中显示 Elan 转录？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-23 14:50:08

这是Codepen 上的一个工作示例

第 1 步：HTML 设置

第 2 步：JS 配置

解决方案1
1 已采纳 2021-02-23 14:50:08