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

问题描述

我正在尝试使用 wavesurfer.js 创建一个网络应用程序，但我不知道如何使用他们的 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 网站中，我找不到任何工作示例。有人能告诉我我错过了什么吗？可能和我的剧本不完整有关。

解决方法

这是一个working example on Codepen

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

我将在下面解释：

第 1 步：HTML 设置

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

<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.elan.js"></script>

那么我们需要两个容器。其中一个用于 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 作为示例。

var wavesurfer = WaveSurfer.create({
    container: '#waveform',waveColor: 'violet',progressColor: 'purple',backend: 'MediaElement',plugins: [
      WaveSurfer.elan.create({
        url: 'https://wavesurfer-js.org/example/elan/transcripts/001z.xml',container: '#annotations',tiers: {
          Text: true,Comments: true
        }
      }),WaveSurfer.regions.create()
    ]
});

现在您的屏幕上有 Elan 转录。让我们添加一个 select 事件来处理对每个脚本的点击。

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

最后，我们将处理 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);

javascript wavesurfer.js