文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在wavesurfer.js中显示Elan转录？

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

Stack Overflow用户

提问于 2021-01-29 21:29:37

回答 1查看 593关注 0票数 1

我试图使用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网站上，我找不到这方面的任何工作例子。有人能告诉我我错过了什么吗？也许这与我的剧本不完整有关。

javascript

wavesurfer.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-23 14:50:08

这是一个Codepen的工作实例

还有region plugin，以防您想要使用它。

我将在下面解释一下：

步骤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>

第二步: 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);

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65961987

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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