luan/app.js

## 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'
  }
]

## 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>
	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'
	}
	]
	<!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>