Skip to content

Instantly share code, notes, and snippets.

@luan

luan/app.js

Created June 16, 2013 17:18
Show Gist options
  • Save luan/5792720 to your computer and use it in GitHub Desktop.
Save luan/5792720 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
App = Ember.Application.create();
App.Store = DS.Store.extend({
adapter: 'DS.FixtureAdapter'
});
App.Router.map(function () {
this.resource('songs');
this.resource('song', { path: '/song/:song_id' });
});
App.IndexRoute = Ember.Route.extend({
redirect: function() { this.transitionTo('songs'); }
});
App.SongsRoute = Ember.Route.extend({
model: function() {
return App.Song.find();
}
});
App.SongRoute = Ember.Route.extend({
model: function(params) {
return App.Song.find(params.song_id);
}
});
App.Song = DS.Model.extend({
url: DS.attr('string')
});
App.SongController = Ember.ObjectController.extend({
started: false,
loadSound: function() {
var self = this;
var sound = soundManager.createSound({
url: this.get('url'),
onfinish: function() { self.finish(); },
whileplaying: function() { self.tick(); },
onload: function() {
self.set('position', 0);
self.set('duration', this.duration);
}
});
this.set('sound', sound);
sound.load();
},
playPause: function() {
if (this.get('playing')) {
this.pause();
} else {
this.play();
}
},
stop: function() {
this.get('sound').stop();
this.finish();
},
play: function() {
var sound = this.get('sound');
if (this.get('unstarted')) {
sound.play();
this.set('started', true);
} else {
sound.resume();
}
this.set('playing', true);
},
pause: function() {
this.get('sound').pause();
this.set('playing', false);
},
tick: function() {
this.set('position', this.get('sound').position);
},
finish: function() {
this.set('position', 0);
this.set('playing', false);
this.set('started', false);
},
playPauseLink: function() {
if (this.get('playing')) {
return 'Pause';
} else {
return 'Play'
}
}.property('playing'),
unstarted: function() {
return !this.get('started');
}.property('started')
});
App.SongView = Ember.View.extend({
didInsertElement: function() {
var self = this;
soundManager.onready(function() {
self.get('controller').send('loadSound');
});
}
});
App.initializer({
name: "soundmanager",
initialize: function() {
soundManager.setup({
url: '/swf'
});
}
});
App.Song.FIXTURES = [
{
id: 1,
url: '/mp3/going_outside.mp3'
}
]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="/javascripts/lib/jquery-1.9.1.js"></script>
<script src="/javascripts/lib/handlebars.js"></script>
<script src="/javascripts/lib/ember-1.0.0-rc.5.js"></script>
<script src="/javascripts/lib/ember-data-0.13.js"></script>
<script src="/javascripts/lib/bootstrap.js"></script>
<script src="/javascripts/lib/soundmanager2.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/lib/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lib/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta charset=utf-8 />
<title>Ember - SoundManager</title>
</head>
<body>
<script type="text/x-handlebars">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">{{#linkTo 'songs'}}Songs{{/linkTo}}</li>
</ul>
</div>
</div>
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="songs">
{{#each model}}
Path: {{url}}
{{#linkTo 'song' this}}Listen{{/linkTo}}
{{/each}}
</script>
<script type="text/x-handlebars" id="song">
<p>{{position}} of {{duration}}</p>
<button class="btn" {{action 'playPause'}}>{{playPauseLink}}</button>
<button class="btn" {{action 'stop'}} {{bindAttr disabled="unstarted"}}>Stop</button>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment