Angular ogv.js 音频播放器控件答案

【问题标题】：Angular ogv.js audio player controlsAngular ogv.js 音频播放器控件
【发布时间】：2020-03-17 02:59:13
【问题描述】：

我在 Angular 8 中使用 ogv.js。我想在我的浏览器 (Safari) 中播放 ogg 音频。

在浏览器中，仅播放音频而没有任何控件（播放/暂停等）？

我的组件 ts 文件有：

  const ogv = require('ogv');

  @ViewChild('ogvContainer', { static: true }) ogvContainer: ElementRef;

  ogv.OGVLoader.base = '../../assets/js/ogv';
  let player = new ogv.OGVPlayer();
  this.ogvContainer.nativeElement.appendChild(player);
  let blob = new Blob([new Uint8Array(decodedData)]);
  player.src = URL.createObjectURL(blob);
  player.play();

我的组件 html 有：

 <div class="ogvContainer" #ogvContainer></div>

在 ogvContainer div 中，创建了另一个元素。

<ogvjs class="ogvjs1" src="blob:http://localhost:4200/681e9637-5f93-4a0c-929e-678dd5e71529"> 
   <canvas style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain;"></canvas>
</ogvjs>

但是什么都没有显示。它只是消耗空白空间。如何在 UI 上显示播放器控件？

【问题讨论】：

能否请您向我们提供更多信息，例如您到底想尝试什么以及 plunkr.io 或 stackblitz 中的工作示例？
@ZetaPR 我想显示播放/暂停等音频控件。目前，没有显示控件
您能否至少向我们提供您的组件和模板，以便我们了解您在尝试什么？
@ZetaPR 我正在从服务器获取 ogg 数据。那就是上面代码中的decodedData。我想在 Safari 浏览器中播放 ogg 音频。为此，我正在使用 ogv.js 库。但图书馆似乎没有显示任何音频控件。上面的代码在我的组件中。
我明白你在做什么，但没有模板我帮不了你。您将拥有不同的文件 .component.ts 和 .component.html，您需要向我们提供这两个文件以帮助您

标签： angular html5-audio ogg opus

【解决方案1】：

为了让控件出现在组件的模板中，您需要添加以下行：

containerElement.appendChild(player);

containerElement 将是您在模板中创建的任何内容

按照 ogv.js 文档中的说明，appendChild 是如何在模板中创建播放器的

【讨论】：

我已经更新了问题。仍然没有显示任何内容