Question

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

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

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

<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>

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

最好的方法是什么？是否有任何音频视图/组件示例可供我实施？

Answer 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'
    };
  }
});

创建可重用的音频视图/组件

1 个答案: