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

【问题标题】：Ember.js: How to load audio-filesEmber.js：如何加载音频文件
【发布时间】：2026-01-12 07:10:01
【问题描述】：

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

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

【问题讨论】：

我将只存储一个 URI 或一个 ID，或者只使用模型 id 访问音频文件。然后可能只是创建一个<audio> 标签来播放它。
试试像sethbrasile.github.io/ember-audio这样的Ember插件

【解决方案1】：

如果您要使用音频元素，您可以按照您的建议进行操作，并包含一个 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 或其他东西时，我需要一个服务来跟踪正在播放的内容和不应该播放的内容。

【讨论】：