Easiest way to add player inside your expression

Default player will provide possibility to:

• search, add, edit, re-edit audio for expresion creators
• load and play this audio for expression viewers

Your audio container must have uniq id, same in edit and view mode

<div id="player0"></div>

  jQuery('#player0').utAudio();

Default skin adapts itself for any form factor
minimal width 150px,
minimal height 110px;

Error screen

  jQuery('#player007').utAudio({data:{url:'I am wrong URL'}});

Embed audio if you know only the URL

Can be usefull for "original-remake" or "tag this audio" expressions, where expression creates around pre-defined audio. Supports much more audio sources then urturn search app (myspace audio, veoh, megaaudio, liveleak.. etc.. and about 50 more) For those extra sources there is no events support (pause, play and etc)

  jQuery('#player1').utAudio({
    data:{
      url:"https://soundcloud.com/yahoo1/timelift-time-demo"
    }
  });

In case of static audio, you can disable ability to edit it

jQuery('#player2').utAudio({
  data:{
    url:"https://soundcloud.com/yahoo1/timelift-time-demo"
  },
  editable: false
});

Custom way to add, edit, remove audios

It can be usefull if you want to create audio panel dynamicly. For example, some audio-playlists, audio-walls, audio-slideshows and etc.

// audio container and action buttons
var container3 = jQuery('#player3');
var buttons3 = {
  add:     $('.player3-add-button'),
  edit:    $('.player3-edit-button'),
  destroy: $('.player3-remove-button')
};

// create new audio panel
buttons3.add.on('click',function(){
  post.dialog('sound', function(data){
    container3.utAudio({data:data});
  });
});

// change audio with another one
buttons3.edit.on('click',function(){
  post.dialog('sound', function(data){
    container3.utAudio('change',data);
  });
});

// fully desctroy audio
buttons3.destroy.on('click',function(){
  container3.utAudio('destroy');
});

Events

For some cases it can be usefull to listen for player's events. Example: You can

• change UI outside player during playing, editing
• highlight custom play/pause controls depends on player state
• start to play next audio, if current audio is finished
• ... and much more :)

Open your browser console to check it ;)

  var player4 = jQuery('#player4').utAudio();

  player4.on('utAudio:change',function(){
    console.log('utAudio:change -> audio was added/changed');
  });

  player4.on('utAudio:ready',function(e,data){
    console.log('utAudio:ready -> audio component got all audio data and ready to start playing',e,data);
  });

  player4.on('utAudio:play',function(){
    console.log('utAudio:play -> audio started to play');
  });

  player4.on('utAudio:pause',function(){
    console.log('utAudio:pause -> audio paused');
  });

  player4.on('utAudio:stop',function(){
    console.log('utAudio:stop -> audio stopped');
  });

  player4.on('utAudio:finish',function(){
    console.log('utAudio:finish -> audio finished');
  });

  player4.on('utAudio:timeupdate',function(e,s){
    console.log('utAudio:timeupdate -> audio time updated', s);
  });

  player4.on('utAudio:seek',function(){
    console.log('utAudio:seek -> audio seek started');
  });

Public methods

Player support "play", "pause" and "stop" methods,
as well as "change" and "destroy" (check part "Custom way to add, edit, remove audios").
As example of usage:

• you can stop/pause all audios on your page, while you you are watching for one of audio.
• you can have custom playback controls, somewhere outside player
• you can play several audios one by one (using events as well)
• ... and much more :)

  var player5 =  jQuery('#player5').utAudio({
    data:{url:"https://soundcloud.com/yahoo1/timelift-time-demo"},
    ui:{
      play:    true,
      progress:true,
      time:    true,
      title:   true,
      source:  true,
      artwork: true
    },
    editable: false
  });

  var buttons5 = {
    play:  $('.player5-play-button'),
    pause: $('.player5-pause-button'),
    stop:  $('.player5-stop-button')
  };

  buttons5.play.on('click',function(){
    player5.utAudio('play');
  });

  buttons5.pause.on('click',function(){
    player5.utAudio('pause');
  });

  buttons5.stop.on('click',function(){
    player5.utAudio('stop');
  });

Show hide UI elements

  jQuery('#player6').utAudio({
    data:{url:'https://soundcloud.com/londongrammar/hey-now'},
    ui:{
      play:    true,
      progress:true,
      time:    true,
      title:   true,
      source:  true,
      artwork: true
    },
    editable: false
  });

  jQuery('#player7').utAudio({
    data:{url:'https://soundcloud.com/londongrammar/hey-now'},
    ui:{
      play:    true,
      progress:false,
      time:    false,
      title:   true,
      source:  true,
      artwork: true
    },
    editable: false
  });

  jQuery('#player8').utAudio({
    data:{url:'https://soundcloud.com/londongrammar/hey-now'},
    ui:{
      play:    true,
      progress:false,
      time:    false,
      title:   false,
      source:  false,
      artwork: true
    },
    editable: false
  });

Custom skins

You can create your own skin by creating css file based on default skin

jQuery("#player9").utAudio({
  skin:'carbon'
});

jQuery("#player10").utAudio({
  data:{url:'http://vimeo.com/66797673/'},
  skin:'carbon',
  ui:{
    play:    true,
    title:   true,
    source:  false,
    preview: true,
    loading: true
  }
});