Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.2.1.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
</head>
<body>
​
  <script type="text/x-handlebars">
    {{! application.hbs }}
    {{render "audio"}}
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" data-template-name="index">
    <br>
    <div class='link' {{action "selectSrc"  "https://dl.dropboxusercontent.com/u/6584750/Sound1.mp3"}}>Sound1.mp3</div>
     <div class='link' {{action "selectSrc" "https://dl.dropboxusercontent.com/u/6584750/Sound2.mp3"}}>Sound2.mp3</div>
     
  </script>
  
  <script type="text/x-handlebars" id='audio'>
  {{! audio.hbs }} 
  <audio id='audio' controls loop>
    <source {{bind-attr src=currentSrc}} type="audio/mpeg"></source>
  </audio>
  <div>{{currentSrc}}</div>
  </script>
</body>
</html>
​
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
​
.link{
  border:1px solid lightgray;
  padding:5px;
  margin-bottom:10px;
  cursor:pointer
}
​
.link:hover{
  border:1px solid black;
}
 
App = Ember.Application.create();
​
App.AudioController = Ember.Controller.extend({
  currentSrc: null,
  play:function(src){
    this.set('currentSrc', src);
  }
});
​
App.IndexController = Ember.Controller.extend({
  needs: ['audio'], 
  actions:{
    selectSrc: function(src){
      this.get('controllers.audio').play(src);
    }
  }
});
​
App.AudioView = Ember.View.extend({
  playAudio: function(){
    if (!this.get('controller.currentSrc')) return;
    Ember.run.schedule('afterRender', function(){
      var audioEl = this.$('#audio')[0];
      audioEl.load();
      audioEl.play();
    });
  }.observes('controller.currentSrc')
});
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x