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. RESTRICTION: for now working only for soundcloud tracks

  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
  }
});