0

我从服务器获取的 JSON 包含一个playable-url属性：

{
    ...
    "text" : "Audio transcription",
    "playable-url" : 'http://myserver.com/full/path/audio.wav"
    ....
}

我收到一份以表格形式显示的列表。在其中一列中，我想显示一个 html 元素以允许用户收听音频。为此，我计划为音频标签生成标记：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

但我不确定为此提供 aView或 a是否更好Component。

最好的方法是什么？是否有任何音频视图/组件示例可以用来作为我的实现的基础？

4

1 回答 1

1

您应该使用组件。无需在此处创建自定义视图，因为您不需要处理任何高级用户事件。以下内容应该可以正常工作：http: //jsfiddle.net/ud3323/3DvXm/

HTML：

<script type="text/x-handlebars" id="components/music-file">
    <audio controls>
        <source {{bind-attr src=source.mp3}} type="audio/mpeg">
        Your browser does not support the audio tag.
    </audio>
</script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Audio Component</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  {{music-file source=model}}
</script>

JS：

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return {
        mp3: 'https://archive.org/download/onclassical-quality-wav-audio-files-of-classical-music/onclassical_demo_fiati-di-parma_thuille_terzo-tempo_sestetto_small-version_64kb.mp3'
    };
  }
});
于 2013-11-13T11:33:36.470 回答