pageflow 13.0.0.beta6 → 13.0.0.beta7

data/lib/pageflow/built_in_file_type.rb

@@ -8,6 +8,8 @@ module Pageflow
                    editor_partial: 'pageflow/editor/image_files/image_file',
                    collection_name: 'image_files',
                    url_templates: ImageFileUrlTemplates.new,
+                   css_background_image_urls: ImageFileCssBackgroundImageUrls.new,
+                   css_background_image_class_prefix: 'image',
                    top_level_type: true)
     end
 
@@ -17,6 +19,8 @@ module Pageflow
                    editor_partial: 'pageflow/editor/video_files/video_file',
                    collection_name: 'video_files',
                    url_templates: VideoFileUrlTemplates.new,
+                   css_background_image_urls: VideoFileCssBackgroundImageUrls.new,
+                   css_background_image_class_prefix: 'video_poster',
                    top_level_type: true,
                    nested_file_types: [BuiltInFileType.text_track])
     end

data/lib/pageflow/built_in_widget_type.rb

@@ -32,8 +32,20 @@ module Pageflow
       new('slim_player_controls', ['player_controls'], 'pageflow/widgets/placeholder')
     end
 
+    def self.default_slideshow_mode
+      new('default_slideshow_mode', ['slideshow_mode'], 'pageflow/widgets/placeholder')
+    end
+
+    def self.phone_horizontal_slideshow_mode
+      new('phone_horizontal_slideshow_mode', ['slideshow_mode'], 'pageflow/widgets/placeholder')
+    end
+
     def self.cookie_notice_bar
       Pageflow::React.create_widget_type('cookie_notice_bar', 'cookie_notice')
     end
+
+    def self.unmute_button
+      Pageflow::React.create_widget_type('unmute_button', 'background_media_control')
+    end
   end
 end

data/lib/pageflow/built_in_widget_types_plugin.rb

@@ -1,11 +1,16 @@
 module Pageflow
   class BuiltInWidgetTypesPlugin < Plugin
     def configure(config)
+      config.widget_types.register(Pageflow::BuiltInWidgetType.default_slideshow_mode,
+                                   default: true)
+      config.widget_types.register(Pageflow::BuiltInWidgetType.phone_horizontal_slideshow_mode)
+
       config.widget_types.register(Pageflow::BuiltInWidgetType.navigation, default: true)
       config.widget_types.register(Pageflow::BuiltInWidgetType.mobile_navigation, default: true)
       config.widget_types.register(Pageflow::BuiltInWidgetType.slim_player_controls)
       config.widget_types.register(Pageflow::BuiltInWidgetType.classic_player_controls, default: true)
       config.widget_types.register(Pageflow::BuiltInWidgetType.cookie_notice_bar)
+      config.widget_types.register(Pageflow::BuiltInWidgetType.unmute_button, default: true)
     end
   end
 end

data/lib/pageflow/file_type.rb

@@ -24,11 +24,37 @@ module Pageflow
     # @return {Boolean}
     attr_reader :top_level_type
 
+    # Callable that receives a file record and returns a hash of one
+    # of the following forms:
+    #
+    #     {
+    #       poster: "url/of/image"
+    #     }
+    #
+    # where `poster` is an arbitrary css class infix. Use `default` to
+    # skip the infix in the generated css class name. Or
+    #
+    #     {
+    #       poster: {
+    #         desktop: "desktop/url/of/image",
+    #         mobile: "mobile/url/of/image"
+    #       }
+    #     }
+    #
+    # to provide different urls for the two media breakpoints.
+    #
+    # @return [#call]
+    attr_reader :css_background_image_urls
+
     # Callable that returns a hash of url template strings indexed by
     # their names.
     # @return [#call]
     attr_reader :url_templates
 
+    # Attributes that are custom to this file type.
+    # @return {Array<Symbol>}
+    attr_reader :custom_attributes
+
     # Create file type to be returned in {PageType#file_types}.
     #
     # @example
@@ -50,9 +76,14 @@ module Pageflow
     #   model `Pageflow::Rainbow::File`.
     # @option options [Array<FileType>] :nested_file_types
     #   Optional. Array of FileTypes allowed for nested files. Defaults to [].
+    # @option options [#call] :css_background_image_urls
+    #   Optional. See {#css_background_image_urls}
     # @option options [#call] :url_templates
     #   Optional. Callable returning a hash of url template strings
     #   indexed by their names.
+    # @option options [Array<Symbol>] :custom_attributes
+    #   Optional. Array of strings containing attribute names that are
+    #   custom to this file type
     def initialize(options)
       @model_string_or_reference = options.fetch(:model)
       @partial = options[:partial]
@@ -60,7 +91,10 @@ module Pageflow
       @collection_name_or_blank = options[:collection_name]
       @nested_file_types = options.fetch(:nested_file_types, [])
       @top_level_type = options.fetch(:top_level_type, false)
+      @css_background_image_urls = options[:css_background_image_urls]
+      @css_background_image_class_prefix = options[:css_background_image_class_prefix]
       @url_templates = options.fetch(:url_templates, ->() { {} })
+      @custom_attributes = options.fetch(:custom_attributes, [])
     end
 
     # ActiveRecord model that represents the files of this type.
@@ -84,6 +118,11 @@ module Pageflow
       end
     end
 
+    # @api private
+    def css_background_image_class_prefix
+      @css_background_image_class_prefix || model.model_name.singular
+    end
+
     # @api private
     def param_key
       model.model_name.param_key.to_sym

data/lib/pageflow/file_types.rb

@@ -31,6 +31,12 @@ module Pageflow
       end
     end
 
+    def with_css_background_image_support
+      select do |file_type|
+        file_type.css_background_image_urls.present?
+      end
+    end
+
     private
 
     def search_for_nested_file_types(higher_level_file_types)

data/lib/pageflow/version.rb

@@ -1,3 +1,3 @@
 module Pageflow
-  VERSION = '13.0.0.beta6'.freeze
+  VERSION = '13.0.0.beta7'.freeze
 end

data/spec/factories/hosted_files.rb

@@ -1,11 +1,17 @@
 module Pageflow
-  class TestHostedFile < ActiveRecord::Base
-    self.table_name = 'test_hosted_files'
-    include HostedFile
-  end
-
   FactoryBot.define do
-    factory :hosted_file, class: TestHostedFile do
+    factory :hosted_file, class: 'Pageflow::TestHostedFile' do
+      attachment_on_s3 { File.open(Engine.root.join('spec', 'fixtures', 'image.png')) }
+      state { 'uploaded_to_s3' }
+
+      transient do
+        used_in { nil }
+      end
+
+      after(:create) do |file, evaluator|
+        create(:file_usage, file: file, revision: evaluator.used_in) if evaluator.used_in
+      end
+
       trait :on_filesystem do
         attachment_on_filesystem { File.open(Engine.root.join('spec', 'fixtures', 'image.png')) }
         attachment_on_s3 { nil }
@@ -19,8 +25,6 @@ module Pageflow
       end
 
       trait :uploaded_to_s3 do
-        attachment_on_s3 { File.open(Engine.root.join('spec', 'fixtures', 'image.png')) }
-        state { 'uploaded_to_s3' }
       end
 
       trait :with_overridden_keep_on_filesystem do

data/vendor/assets/javascripts/audio5.min.js

@@ -4,9 +4,9 @@
  * License MIT (c) Zohar Arad 2013
  */
 (function ($win, ns, factory) {
+  "use strict";
   /*global define */
   /*global swfobject */
-  "use strict";
 
   if (typeof (module) !== 'undefined' && module.exports) { // CommonJS
     module.exports = factory(ns, $win);
@@ -134,17 +134,35 @@
     trigger: function (evt) {
       if (this.channels && this.channels.hasOwnProperty(evt)) {
         var args = Array.prototype.slice.call(arguments, 1);
-        var a = [];
+
+        // temp array to store all subscribers for the channel evt that must be stored in state
+        var evtSubscribers = [];
+        // temp array to store all subscribers for the channel evt that is being triggered that must be executed.
+        var evtSubscribersForExec = [];
+
         while(this.channels[evt].length > 0) {
           var sub = this.channels[evt].shift();
-          if (typeof (sub.fn) === 'function') {
-            sub.fn.apply(sub.ctx, args);
-          }
+
           if ( !sub.once ){
-            a.push(sub);
+            // for any channel event triggers that are not marked as once only, we need to keep.
+            evtSubscribers.push(sub);
           }
+
+          // if we have a function with the channel subscription, store in temp array ready to call after all proceeded
+          if (typeof (sub.fn) === 'function') {
+            // every subscriber we've processed will be executed
+            evtSubscribersForExec.push(sub);
+          }
+        }
+
+        // before we execute any of the subscribers to the trigger, we must make sure keep this.channels[evt] up to date in case any sub fns call off
+        this.channels[evt] = evtSubscribers;
+
+        // run all the event subscribers that need executing
+        while(evtSubscribersForExec.length > 0) {
+          var eventSub = evtSubscribersForExec.shift();
+          eventSub.fn.apply(eventSub.ctx, args);
         }
-        this.channels[evt] = a;
       }
     }
   };
@@ -153,19 +171,21 @@
     /**
      * Flash embed code string with cross-browser support.
      */
-    flash_embed_code: (function () {
+  flash_embed_code: function (id, swf_location, ts) {
       var prefix;
-      var s = '<param name="movie" value="$2?playerInstance=window.' + ns + '_flash.instances[\'$1\']&datetime=$3"/>' +
+      var elemId = ns + id;
+      var s = '<param name="movie" value="' + swf_location + '?playerInstanceNumber=' + id + '&datetime=' + ts + '"/>' +
         '<param name="wmode" value="transparent"/>' +
         '<param name="allowscriptaccess" value="always" />' +
         '</object>';
       if (ActiveXObject) {
-        prefix = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1" id="$1">';
+        prefix = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1" height="1" id="' + elemId + '">';
       } else {
-        prefix = '<object type="application/x-shockwave-flash" data="$2?playerInstance=window.' + ns + '_flash.instances[\'$1\']&datetime=$3" width="1" height="1" id="$1" >';
+        prefix = '<object type="application/x-shockwave-flash" data="' + swf_location + '?playerInstanceNumber=' + id + '&datetime=' + ts + '" width="1" height="1" id="' + elemId + '" >';
       }
+
       return prefix + s;
-    }()),
+    },
     /**
      * Check if browser supports audio mime type.
      * @param {String} mime_type audio mime type to check
@@ -175,30 +195,36 @@
       var a = document.createElement('audio');
       var mime_str;
       switch (mime_type) {
-      case 'mp3':
-        mime_str = 'audio/mpeg; codecs="mp3"';
-        break;
-      case 'vorbis':
-        mime_str = 'audio/ogg; codecs="vorbis"';
-        break;
-      case 'opus':
-        mime_str = 'audio/ogg; codecs="opus"';
-        break;
-      case 'webm':
-        mime_str = 'audio/webm; codecs="vorbis"';
-        break;
-      case 'mp4':
-        mime_str = 'audio/mp4; codecs="mp4a.40.5"';
-        break;
-      case 'wav':
-        mime_str = 'audio/wav; codecs="1"';
-        break;
-      }
-      if (mime_str === undefined) {
-        throw new Error('Unspecified Audio Mime Type');
-      } else {
-        return !!a.canPlayType && a.canPlayType(mime_str) !== '';
+        case 'mp3':
+          mime_str = 'audio/mpeg;';
+          break;
+        case 'vorbis':
+          mime_str = 'audio/ogg; codecs="vorbis"';
+          break;
+        case 'opus':
+          mime_str = 'audio/ogg; codecs="opus"';
+          break;
+        case 'webm':
+          mime_str = 'audio/webm; codecs="vorbis"';
+          break;
+        case 'mp4':
+          mime_str = 'audio/mp4; codecs="mp4a.40.5"';
+          break;
+        case 'wav':
+          mime_str = 'audio/wav; codecs="1"';
+          break;
       }
+      if (mime_str !== undefined) {
+        if (mime_type === 'mp3' && navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/Firefox/i)) {
+          return true;
+        }
+        try {
+          return !!a.canPlayType && a.canPlayType(mime_str) !== '';
+        } catch (e) {
+          return false;
+        }
+      }
+      return false;
     },
     /**
      * Boolean flag indicating whether the browser has Flash installed or not
@@ -232,19 +258,17 @@
       document.body.appendChild(d);
       if(typeof($win.swfobject) === 'object'){
         var fv = {
-          playerInstance: 'window.'+ ns + '_flash.instances["'+id+'"]'
+          playerInstance: 'window.'+ ns + '_flash.instances[\''+id+'\']'
         };
         var params = {
           allowscriptaccess: 'always',
           wmode: 'transparent'
         };
-        d.innerHTML = '<div id="'+id+'"></div>';
-        swfobject.embedSWF(swf_location + '?ts='+(new Date().getTime() + Math.random()), id, "1", "1", "9.0.0", null, fv, params);
+        d.innerHTML = '<div id="'+ ns + id +'"></div>';
+        swfobject.embedSWF(swf_location + '?ts='+(new Date().getTime() + Math.random()), ns + id, "1", "1", "9.0.0", null, fv, params);
       } else {
-        var flashSource = this.flash_embed_code.replace(/\$1/g, id);
-        flashSource = flashSource.replace(/\$2/g, swf_location);
-        flashSource = flashSource.replace(/\$3/g, (new Date().getTime() + Math.random())); // Ensure swf is not pulled from cache
-        d.innerHTML = flashSource;
+        var ts = new Date().getTime() + Math.random(); // Ensure swf is not pulled from cache
+        d.innerHTML = this.flash_embed_code(id, swf_location, ts);
       }
       return document.getElementById(id);
     },
@@ -281,7 +305,7 @@
     duration: 0, /** {Float} audio duration (sec) */
     position: 0, /** {Float} audio position (sec) */
     load_percent: 0, /** {Float} audio file load percent (%) */
-    seekable: null, /** {Boolean} is loaded audio seekable */
+    seekable: false, /** {Boolean} is loaded audio seekable */
     ready: null /** {Boolean} is loaded audio seekable */
   };
 
@@ -291,8 +315,7 @@
    * @type {Object}
    */
   var globalAudio5Flash = $win[ns + '_flash'] = $win[ns + '_flash'] || {
-    instances: { }, /** FlashAudioPlayer instance hash */
-    count: 0 /** FlashAudioPlayer instance count */
+    instances: [] /** FlashAudioPlayer instance hash */
   };
 
   /**
@@ -311,9 +334,8 @@
      * @param {String} swf_src path to audio player SWF file
      */
     init: function (swf_src) {
-      globalAudio5Flash.count += 1;
-      this.id = ns + globalAudio5Flash.count;
-      globalAudio5Flash.instances[this.id] = this;
+      globalAudio5Flash.instances.push(this);
+      this.id = globalAudio5Flash.instances.length - 1;
       this.embed(swf_src);
     },
     /**
@@ -327,7 +349,7 @@
      * ExternalInterface callback indicating SWF is ready
      */
     eiReady: function () {
-      this.audio = document.getElementById(this.id);
+      this.audio = document.getElementById(ns + this.id);
       this.trigger('ready');
     },
     /**
@@ -363,9 +385,13 @@
     /**
      * ExternalInterface download progress callback. Fires as long as audio file is downloaded by browser.
      * @param {Float} percent audio download percent
+     * @param {Float} duration audio total duration (sec)
+     * * @param {Boolean} seekable is audio seekable or not (download or streaming)
      */
-    eiProgress: function (percent) {
+    eiProgress: function (percent, duration, seekable) {
       this.load_percent = percent;
+      this.duration = duration;
+      this.seekable = seekable;
       this.trigger('progress', percent);
     },
     /**
@@ -381,6 +407,7 @@
     eiPlay: function () {
       this.playing = true;
       this.trigger('play');
+      this.trigger('playing');
     },
     /**
      * ExternalInterface audio pause callback. Fires when audio is paused.
@@ -393,7 +420,7 @@
      * ExternalInterface audio ended callback. Fires when audio playback ended.
      */
     eiEnded: function () {
-      this.playing = false;
+      this.pause();
       this.trigger('ended');
     },
     /**
@@ -459,6 +486,24 @@
         this.audio.seekTo(position);
         this.position = position;
       } catch (e) {}
+    },
+    /**
+     * This feature was not implemented for Flash
+     */
+    rate: function () {
+      // Not implemented
+    },
+    /**
+     * Destroy audio object and remove from DOM
+     */
+    destroyAudio: function() {
+      if(this.audio){
+        this.pause();
+        this.audio.parentNode.removeChild(this.audio);
+        delete globalAudio5Flash.instances[this.id];
+        globalAudio5Flash.instances.splice(this.id, 1);
+        delete this.audio;
+      }
     }
   };
 
@@ -475,52 +520,91 @@
     /**
      * Initialize the player instance
      */
-    init: function (reusedTag) {
-      this.reusedTag = reusedTag;
+    init: function () {
+      this._rate = 1;
       this.trigger('ready');
     },
+    /**
+     * Create new audio instance
+     */
     createAudio: function(){
-      this.audio = this.reusedTag || new Audio();
+      this.audio = new Audio();
       this.audio.autoplay = false;
       this.audio.preload = 'auto';
       this.audio.autobuffer = true;
+      this.audio.playbackRate = this._rate;
 
       this.audio.setAttribute('crossorigin', 'anonymous');
 
       this.bindEvents();
     },
+    /**
+     * Destroy current audio instance
+     */
     destroyAudio: function(){
       if(this.audio){
+        this.pause();
         this.unbindEvents();
-        delete this.audio;
+        try {
+          this.audio.setAttribute('src', '');
+        } finally {
+          delete this.audio;
+        }
       }
     },
+    /**
+     * Sets up audio event listeners once so adding / removing event listeners is always done
+     * on the same callbacks.
+     */
+    setupEventListeners: function(){
+      this.listeners = {
+        loadstart: this.onLoadStart.bind(this),
+        canplay: this.onLoad.bind(this),
+        loadedmetadata: this.onLoadedMetadata.bind(this),
+        play: this.onPlay.bind(this),
+        playing: this.onPlaying.bind(this),
+        pause: this.onPause.bind(this),
+        ended: this.onEnded.bind(this),
+        error: this.onError.bind(this),
+        timeupdate: this.onTimeUpdate.bind(this),
+        seeking: this.onSeeking.bind(this),
+        seeked: this.onSeeked.bind(this)
+      };
+    },
     /**
      * Bind DOM events to Audio object
      */
-    bindEvents: function () {
-      this.audio.addEventListener('loadstart', this.onLoadStart.bind(this));
-      this.audio.addEventListener('canplay', this.onLoad.bind(this));
-      this.audio.addEventListener('loadedmetadata', this.onLoadedMetadata.bind(this));
-      this.audio.addEventListener('playing', this.onPlay.bind(this));
-      this.audio.addEventListener('pause', this.onPause.bind(this));
-      this.audio.addEventListener('ended', this.onEnded.bind(this));
-      this.audio.addEventListener('error', this.onError.bind(this));
-      this.audio.addEventListener('timeupdate', this.onTimeUpdate.bind(this));
-      this.audio.addEventListener('seeking', this.onSeeking.bind(this));
-      this.audio.addEventListener('seeked', this.onSeeked.bind(this));
-    },
-    unbindEvents: function(){
-      this.audio.removeEventListener('loadstart', this.onLoadStart.bind(this));
-      this.audio.removeEventListener('canplay', this.onLoad.bind(this));
-      this.audio.removeEventListener('loadedmetadata', this.onLoadedMetadata.bind(this));
-      this.audio.removeEventListener('playing', this.onPlay.bind(this));
-      this.audio.removeEventListener('pause', this.onPause.bind(this));
-      this.audio.removeEventListener('ended', this.onEnded.bind(this));
-      this.audio.removeEventListener('error', this.onError.bind(this));
-      this.audio.removeEventListener('timeupdate', this.onTimeUpdate.bind(this));
-      this.audio.removeEventListener('seeking', this.onSeeking.bind(this));
-      this.audio.removeEventListener('seeked', this.onSeeked.bind(this));
+    bindEvents: function() {
+      if(this.listeners === undefined){
+        this.setupEventListeners();
+      }
+      this.audio.addEventListener('loadstart', this.listeners.loadstart, false);
+      this.audio.addEventListener('canplay', this.listeners.canplay, false);
+      this.audio.addEventListener('loadedmetadata', this.listeners.loadedmetadata, false);
+      this.audio.addEventListener('play', this.listeners.play, false);
+      this.audio.addEventListener('playing', this.listeners.playing, false);
+      this.audio.addEventListener('pause', this.listeners.pause, false);
+      this.audio.addEventListener('ended', this.listeners.ended, false);
+      this.audio.addEventListener('error', this.listeners.error, false);
+      this.audio.addEventListener('timeupdate', this.listeners.timeupdate, false);
+      this.audio.addEventListener('seeking', this.listeners.seeking, false);
+      this.audio.addEventListener('seeked', this.listeners.seeked, false);
+    },
+    /**
+     * Unbind DOM events from Audio object
+     */
+    unbindEvents: function() {
+      this.audio.removeEventListener('loadstart', this.listeners.loadstart);
+      this.audio.removeEventListener('canplay', this.listeners.canplay);
+      this.audio.removeEventListener('loadedmetadata', this.listeners.loadedmetadata);
+      this.audio.removeEventListener('play', this.listeners.play);
+      this.audio.removeEventListener('playing', this.listeners.playing);
+      this.audio.removeEventListener('pause', this.listeners.pause);
+      this.audio.removeEventListener('ended', this.listeners.ended);
+      this.audio.removeEventListener('error', this.listeners.error);
+      this.audio.removeEventListener('timeupdate', this.listeners.timeupdate);
+      this.audio.removeEventListener('seeking', this.listeners.seeking);
+      this.audio.removeEventListener('seeked', this.listeners.seeked);
     },
     /**
      * Audio load start event handler. Triggered when audio starts loading
@@ -533,6 +617,9 @@
      * Resets player parameters and starts audio download progress timer.
      */
     onLoad: function () {
+      if(!this.audio){
+        return setTimeout(this.onLoad.bind(this), 100);
+      }
       this.seekable = this.audio.seekable && this.audio.seekable.length > 0;
       if (this.seekable) {
         this.timer = setInterval(this.onProgress.bind(this), 250);
@@ -549,12 +636,21 @@
      * Audio play event handler. Triggered when audio starts playing.
      */
     onPlay: function () {
+      this.playing = true;
       this.trigger('play');
     },
+    /**
+     * Audio play event handler. Triggered when audio starts playing.
+     */
+    onPlaying: function () {
+      this.playing = true;
+      this.trigger('playing');
+    },
     /**
      * Audio pause event handler. Triggered when audio is paused.
      */
     onPause: function () {
+      this.playing = false;
       this.trigger('pause');
     },
     /**
@@ -568,9 +664,11 @@
      * Audio timeupdate event handler. Triggered as long as playhead position is updated (audio is being played).
      */
     onTimeUpdate: function () {
-      if (this.audio.buffered !== null && this.playing) {
-        this.position = this.audio.currentTime;
-        this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+      if (this.audio && this.playing) {
+        try{
+          this.position = this.audio.currentTime;
+          this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+        } catch (e){}
         this.trigger('timeupdate', this.position, this.duration);
       }
     },
@@ -580,8 +678,9 @@
      * Cancelled when audio has fully download or when a new audio file has been loaded to the player.
      */
     onProgress: function () {
-      if (this.audio.buffered !== null) {
-        this.load_percent = parseInt(((this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration) * 100), 10);
+      if (this.audio && this.audio.buffered !== null && this.audio.buffered.length) {
+        this.duration = this.audio.duration === Infinity ? null : this.audio.duration;
+        this.load_percent = parseInt(((this.audio.buffered.end(this.audio.buffered.length - 1) / this.duration) * 100), 10);
         this.trigger('progress', this.load_percent);
         if (this.load_percent >= 100) {
           this.clearLoadProgress();
@@ -632,8 +731,11 @@
      */
     load: function (url) {
       this.reset();
-      this.destroyAudio();
-      this.createAudio();
+      this.trigger('pause');
+      //this.destroyAudio();
+      if(this.audio === undefined){
+        this.createAudio();
+      }
       this.audio.setAttribute('src', url);
       this.audio.load();
     },
@@ -641,15 +743,19 @@
      * Play audio
      */
     play: function () {
-      this.playing = true;
-      this.audio.play();
+      if(this.audio) {
+        var playPromise = this.audio.play();
+        this.audio.playbackRate = this._rate;
+        return playPromise;
+      }
     },
     /**
      * Pause audio
      */
     pause: function () {
-      this.playing = false;
-      this.audio.pause();
+      if(this.audio) {
+        this.audio.pause();
+      }
     },
     /**
      * Get / Set audio volume
@@ -676,10 +782,23 @@
       if (playing) {
         this.play();
       } else {
-        if (this.audio.buffered !== null) {
+        if (this.audio.buffered !== null && this.audio.buffered.length) {
           this.trigger('timeupdate', this.position, this.duration);
         }
       }
+    },
+    /**
+     * Define the playback rate
+     * @param {Float} v playback rate value to be set
+     */
+    rate: function (v) {
+      if (v === undefined || isNaN(parseFloat(v))) {
+        return this._rate;
+      }
+      this._rate = v;
+      if (this.audio) {
+          this.audio.playbackRate = v;
+      }
     }
   };
 
@@ -748,7 +867,7 @@
       if (this.settings.use_flash) {
         this.audio.init(s.swf_path);
       } else {
-        this.audio.init(s.reusedTag);
+        this.audio.init();
       }
     },
     /**
@@ -757,27 +876,35 @@
      * @return {FlashAudioPlayer,HTML5AudioPlayer} audio player instance
      */
     getPlayer: function () {
-      var i, l, player;
-      for (i = 0, l = this.settings.codecs.length; i < l; i++) {
-        var codec = this.settings.codecs[i];
-        if (Audio5js.can_play(codec)) {
-          player = new HTML5AudioPlayer();
-          this.settings.use_flash = false;
-          this.settings.player = {
-            engine: 'html',
-            codec: codec
-          };
-          break;
-        }
-      }
-      if (player === undefined) {
-        // here we double check for mp3 support instead of defaulting to Flash in case user overrode the settings.codecs array with an empty array.
-        this.settings.use_flash = !Audio5js.can_play('mp3');
-        player = this.settings.use_flash ? new FlashAudioPlayer() : new HTML5AudioPlayer();
+      var i, l, player, codec;
+      if(this.settings.use_flash){
+        player = new FlashAudioPlayer();
         this.settings.player = {
-          engine: (this.settings.use_flash ? 'flash' : 'html'),
+          engine: 'flash',
           codec: 'mp3'
         };
+      } else {
+        for (i = 0, l = this.settings.codecs.length; i < l; i++) {
+          codec = this.settings.codecs[i];
+          if (Audio5js.can_play(codec)) {
+            player = new HTML5AudioPlayer();
+            this.settings.use_flash = false;
+            this.settings.player = {
+              engine: 'html',
+              codec: codec
+            };
+            break;
+          }
+        }
+        if (player === undefined) {
+          // here we double check for mp3 support instead of defaulting to Flash in case user overrode the settings.codecs array with an empty array.
+          this.settings.use_flash = !Audio5js.can_play('mp3');
+          player = this.settings.use_flash ? new FlashAudioPlayer() : new HTML5AudioPlayer();
+          this.settings.player = {
+            engine: (this.settings.use_flash ? 'flash' : 'html'),
+            codec: 'mp3'
+          };
+        }
       }
       return player;
     },
@@ -798,18 +925,36 @@
       this.audio.on('seeking', this.onSeeking, this);
       this.audio.on('seeked', this.onSeeked, this);
     },
+    /**
+     * Bind events from audio object to internal callbacks
+     */
+    unbindAudioEvents: function () {
+      this.audio.off('ready', this.onReady);
+      this.audio.off('loadstart', this.onLoadStart);
+      this.audio.off('loadedmetadata', this.onLoadedMetadata);
+      this.audio.off('play', this.onPlay);
+      this.audio.off('pause', this.onPause);
+      this.audio.off('ended', this.onEnded);
+      this.audio.off('canplay', this.onCanPlay);
+      this.audio.off('timeupdate', this.onTimeUpdate);
+      this.audio.off('progress', this.onProgress);
+      this.audio.off('error', this.onError);
+      this.audio.off('seeking', this.onSeeking);
+      this.audio.off('seeked', this.onSeeked);
+    },
     /**
      * Load audio from URL
      * @param {String} url URL of audio to load
      */
     load: function (url) {
+      var that = this;
       var f = function(u){
-        this.audio.load(u);
-        this.trigger('load');
-      }.bind(this, url);
+        that.audio.load(u);
+        that.trigger('load');
+      };
 
       if(this.ready){
-        f();
+        f(url);
       } else {
         this.on('ready', f);
       }
@@ -819,8 +964,7 @@
      */
     play: function () {
       if(!this.playing){
-        this.playing = true;
-        this.audio.play();
+        return this.audio.play();
       }
     },
     /**
@@ -828,7 +972,6 @@
      */
     pause: function () {
       if(this.playing){
-        this.playing = false;
         this.audio.pause();
       }
     },
@@ -859,6 +1002,20 @@
       this.audio.seek(position);
       this.position = position;
     },
+    /**
+     * Define the playback rate
+     * @param {Float} value playback rate value to be set
+     */
+    rate: function (value) {
+        return this.audio.rate(value);
+    },
+    /**
+     * Destroy audio object and remove from DOM
+     */
+    destroy: function() {
+      this.unbindAudioEvents();
+      this.audio.destroyAudio();
+    },
     /**
      * Callback for audio ready event. Indicates audio is ready for playback.
      * Looks for ready callback in settings object and invokes it in the context of player instance
@@ -886,27 +1043,22 @@
      * Audio play event handler
      */
     onPlay: function () {
+      this.playing = true;
       this.trigger('play');
     },
     /**
      * Audio pause event handler
      */
     onPause: function () {
+      this.playing = false;
       this.trigger('pause');
     },
     /**
      * Playback end event handler
      */
     onEnded: function () {
-      var wasPlaying = this.playing;
-
-      if (this.settings.loop && wasPlaying) {
-        this.audio.play();
-      }
-      else {
-        this.playing = false;
-        this.trigger('ended');
-      }
+      this.playing = false;
+      this.trigger('ended');
     },
     /**
      * Audio error event handler
@@ -944,9 +1096,7 @@
      */
     onTimeUpdate: function (position, duration) {
       this.position = this.settings.format_time ? util.formatTime(position) : position;
-      if (this.duration !== duration) {
-        this.duration = this.settings.format_time && duration !== null ? util.formatTime(duration) : duration;
-      }
+      this.duration = this.settings.format_time && duration !== null ? util.formatTime(duration) : duration;
       this.trigger('timeupdate', this.position, this.duration);
     },
     /**
@@ -954,6 +1104,7 @@
      * @param {Float} loaded audio download percent
      */
     onProgress: function (loaded) {
+      this.duration = this.audio.duration;
       this.load_percent = loaded;
       this.trigger('progress', loaded);
     }
@@ -964,4 +1115,4 @@
 
   return Audio5js;
 
-}));
+}));