Using html5 audio from Ember

Im trying to set the html5 audio control with the url of an audio resource. In order to check if player can play mp3 or ogg files, I'm using this:

var audio = this.$('audio')[0],
    type  = audio.canPlayType('audio/mpeg') ? 'mp3' : 'ogg';

My first attempt was to append the proper url extension inside the src property,

App.AudioPlayerComponent = Ember.Component.extend({
  src: function() {
    var audio = this.$('audio')[0],
        type  = audio.canPlayType('audio/mpeg') ? 'mp3' : 'ogg';
    return this.get('url') + '.' + this.get('_type');
  }.property('url')
});

But it doesnt work because before template has been rendered, src attribute is evaluated and we cannot access to this.$('audio')[0], also, the property is not reevaluated because url has not changed. so finally I added a _type property that is set in didInsertElement callback and the src checks for its existence. With this, src is reevaluated when we set _type and when url changes.

App.AudioPlayerComponent = Ember.Component.extend({
  src: function() {
    if(Ember.isEmpty(this.get('_type'))) return '';

    return this.get('url') + '.' + this.get('_type');
  }.property('url', '_type'),

  didInsertElement: function() {
    var audio = this.$('audio')[0],
        type  = audio.canPlayType('audio/mpeg') ? 'mp3' : 'ogg';
    this.set('_type', type);
  }
});

I'd like to avoid this check if(Ember.isEmpty(this.get('_type'))) return '';, I think is kinda ugly and maybe Ember has a proper solution for this.

Working demo: http://ift.tt/1zepf4e