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

【问题标题】：How to display Elan transcription in wavesurfer.js?如何在 wavesurfer.js 中显示 Elan 转录？
【发布时间】：2021-01-29 21:29:37
【问题描述】：

我正在尝试使用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 网站外，我找不到任何可行的示例。有人能告诉我我错过了什么吗？也许这与我的脚本不完整有关。

【问题讨论】：

标签： javascript wavesurfer.js

【解决方案1】：

这是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);

【讨论】：