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

Question

我正在尝试使用 wavesurfer.js 创建网络应用程序，但我不知道如何使用他们的 Elan 插件显示 transcript/caption。

    <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

这是一个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。还有一个 play/pause 按钮。

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

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

How to display Elan transcription in wavesurfer.js?

javascript

wavesurfer.js

这是一个working example on Codepen

第 1 步：HTML 设置

第 2 步：JS 配置