Ember.js：如何加载音频文件

Posted 2021-05-06

我正在开发一个必须在某个时刻加载音频文件的ember-app。由于我正在并行开发REST-Server（express.js），我想知道如何提供mp3文件以及如何在ember端处理它。

那么：如何将音频文件作为模型的一部分加载？ （也许我应该在我的模型中存储一个URL？）

答案

如果您要使用音频元素，您可以按照您的建议进行操作，并包含URL。可能存在安全字符串问题，您必须计划多种音频类型。

import Ember from 'ember';

const thisData = [ // example of some data
  {
    id: 1,
    audioUrl: 'http://sheriffderek.consulting/resources/audio/spicy.mp3'
  }
];

export default Ember.Route.extend({
  model() {
    return thisData;
  }
});

...

{{#each content as |sound|}}
  <audio controls>
    <source src="{{sound.audioUrl}}" type="audio/ogg">
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
  </audio>
{{/each}}

这是一个测试：

https://ember-twiddle.com/fdcdc741f67aa8603d276229a907d5e9?openFiles=routes.application.js%2C

音频标签：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

我不确定如果在一个页面上有很多内容会发生什么...当我使用soundcloud或其他东西时，我需要一个服务来跟踪正在播放的内容和不应该播放的内容。