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

时间:2016-07-24 01:35:32

标签: rest express ember.js

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

那么:如何将音频文件作为模型的一部分加载? (也许我应该在我的模型中存储一个URL?)

1 个答案:

答案 0 :(得分:0)

如果您打算使用音频元素,您可以按照建议进行操作,并添加网址。可能存在安全字符串问题,您必须计划多种音频类型。

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或其他东西时,我需要一个服务来跟踪正在播放的内容和不应该播放的内容。