fiver (Google Chrome Extension): [instant play & preview audios] Play instantly music/voices on the web page without download it. / work with <a> links (audio files) / GAPLESS playback, Preview Audio (55sec or 55%) / supported formats: "aif","m4a","mp3","ogg","opus","wav"

content_script.js

function eschtml(body) {
    return jQuery('<div>').text(body).html();
}

$(document).ready(function(){
    var exts = ["aif","m4a","mp3","ogg","opus","wav"];
    
    var queue = [];
    var current = {};
    
    var $content_wrapper = $("<div/>", {
      'id':'content-script-fiver-wrapper'
    }).prependTo('body');
    
    var $_audio = $("<audio/>", {
        'preload':'auto',
        'controls':'controls',
        'volume':'92'
    });
    var $audio;
    var $new_audio;
    
    var $preview = $("<input/>", {
        'type':'checkbox',
        'checked':'checked',
    }).appendTo($content_wrapper);
    
    $("<span>preview mode</span>").insertAfter($preview);
    
    var $meta = $("<p/>", {
      'id':'content-script-fiver-meta'
    }).appendTo($content_wrapper);
    
    for (var i = 0,j=0; i < $('a').size(); ++i) {
        var $uri = $('a').eq(i);
        var absuri = $uri.attr('href');
        var title = $uri.text();
        
        var available_format = false;
        
        exts.forEach(function(ext) {
            if (absuri.lastIndexOf("."+ext) != -1) {
                available_format = true;
            }
        });
	

        if (!available_format) continue;

	queue[j]=[absuri,title];
        $uri.click({idx:j},function(e){
	  if ($new_audio instanceof jQuery) $new_audio.remove();
          if ($audio instanceof jQuery) $audio.remove();

	  $audio = new_audio(queue[e.data.idx][0],queue[e.data.idx][1],e.data.idx);
	  $audio[0].play();
	  return false;
	});
	j++;

    }
    
    function new_audio(src,title,idx) {
      //console.log("new_audio",src,title,idx);
      var $__audio = $_audio.clone().appendTo($content_wrapper);
          $__audio.attr("src",src);
	  $__audio.attr("data-title",title);
	  $__audio.attr("data-idx",idx);
    $__audio.bind('ended',function(){
      //go_next();
      $(this).remove();
    });
	      var ctx = this;
          $__audio.bind('timeupdate',function(){
      if (preview_mode) {
      var remain = Math.max(60,$audio[0].duration*preview_max_ratio) - $audio[0].currentTime;
	$meta.text("["+$audio.attr("data-title")+"]"+Math.ceil(remain+5));
	if($audio[0].currentTime >= 55 && ($audio[0].currentTime / $audio[0].duration) >preview_max_ratio){
	  if (!$new_audio) {
	  cue();
	  
	  setTimeout(function(_this){
	    go_next.call(ctx);
	    $(_this).remove();
	  },5000,this);
	  }
	}
      }
      else {
      var remain = $audio[0].duration - $audio[0].currentTime;
      $meta.text("["+$audio.attr("data-title")+"]"+Math.ceil(remain));
      if (remain < 10) {
	if (!$new_audio) {
	cue();
	}
      }
      if (remain <= 0.2) {
	// to gapless play. 
	go_next();
      }
      }
    });
      return $__audio;
    }
    
    function cue()
    {
      //if ($new_audio) return;
      var next_idx = parseInt($audio.attr("data-idx")) + 1;
      var next_src = queue[next_idx][0];
      //console.log("cued",next_idx,next_src);
      $audio.attr("data-old","1");
      $new_audio = new_audio(next_src,queue[next_idx][1],next_idx);
      //$new_audio[0].currentTime = 0.0225;
    }
    
    function go_next() {
      /*
      var next_idx = parseInt($audio.attr("data-idx")) + 1;
      var next_src = queue[next_idx][0];
      $audio.attr("data-old","1");
      $new_audio = new_audio(next_src,queue[next_idx][1],next_idx);
      $new_audio[0].play();
      */
      $audio = $new_audio;
      $audio[0].play();
      $new_audio = undefined;
    }
    

    
    preview_mode = true;
    preview_max_ratio = 0.55;
    
    $preview.change(function(){
	if ($(this).is(':checked')) {
		preview_mode = true;
	} else {
		preview_mode = false;
	}
    });



});

manifest.json

{
  "name": "fiver",
  "description": "",
  "version": "1.0",
  "content_scripts": [
    { "matches": ["*://*"], "js": ["jquery-2.1.4.min.js","content_script.js"] }
  ],
  "permissions": [
	  "http://*/*",
	  "notifications"
  ],
  "manifest_version": 2
}