lowlag test

index.html

<div id="background"></div>

<div id="site">
  <titrrre>
    <a href="../"><h1>ENA-N</h1></a>
   </titrrre>
  <playlist>
  <a href="../"><h2 class="activ"> Interlude MPC</h2></a>
  <a href="../"><h2> Interlude 2</h2></a>
  <a href="../"><h2> Interlude 3</h2></a>
  <a href="../"><h2> Interlude 4</h2></a>
  </playlist>
  
  
  <p><br/>Jouez les sons avec <br/><br/>le pavé numérique<br/><br/><br/><br/>Play Sounds<br/><br/>with<br/><br/>Numeric Keypad</p>

</div>


<div id="screen"></div>
<div id="mpcvent"></div>
<div id="mpckey"></div>
<div id="mpc">

  <div id="wrapper">
    <br/>
    <div class="clear"></div>

    <ul>
      <li id="btn-s6" 
          onmousedown="lowLag.play('7');"
          style="background:#999 url(https://ena-n.com/lowLag/image/7.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s7" 
    onmousedown="lowLag.play('8');"      
   style="background:#999 url(https://ena-n.com/lowLag/image/8.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s8" onmousedown="lowLag.play('9');"
      
  style="background:#999 url(https://ena-n.com/lowLag/image/9.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
    </ul>

    <div class="clear"></div>

    <ul>
      <li id="btn-s3" onclick="lowLag.play('4');" style="background:#999 url(https://ena-n.com/lowLag/image/4.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s4" onclick="lowLag.play('5');" style="background:#999 url(https://ena-n.com/lowLag/image/5.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s5" onclick="lowLag.play('6');" style="background:#999 url(https://ena-n.com/lowLag/image/6.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
    </ul>

    <div class="clear"></div>

    <ul>
      <li id="btn-s0" onclick="lowLag.play('1');" style="background:#999 url(https://ena-n.com/lowLag/image/1.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s1" onclick="lowLag.play('2');" style="background:#999 url(https://ena-n.com/lowLag/image/2.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
      <li id="btn-s2" onclick="lowLag.play('3');" style="background:#999 url(https://ena-n.com/lowLag/image/3.png); background-size: 8em; background-repeat: no-repeat;">
        <div></div>
      </li>
    </ul>

    <div class="clear"></div>
  </div>
</div>

lowlag-test.markdown

lowlag test

A Pen by HyDz on CodePen.

License.

script.js

function initNload() {
$(document).ready(function(){
lowLag.init({'urlPrefix':'https://ena-n.com/lowLag/audio/'});
lowLag.load(['empty.mp3','empty.ogg','empty.wav'],'empty');
var son;
for (son=1; son < 10; son++){
lowLag.load(['' + son + '.mp3','' + son + '.ogg','' + son + '.wav'],''+ son +'');}
});
}
initNload();
if (!window.console) console = {log: function() {}};

var lowLag = new function(){
	this.someVariable = undefined;
	this.showNeedInit = function(){ lowLag.msg("lowLag: you must call lowLag.init() first!"); }

	this.load = this.showNeedInit;
	this.play = this.showNeedInit;

	this.useSuspension = false;
	this.suspendDelay = 10000; // ten seconds
	this.suspendTimeout = null;
	this.suspended = false;

	this.audioTagTimeToLive = 5000;

	this.sm2url = 'sm2/swf/';

	this.soundUrl = "";

	this.debug = "console";

	this.divLowLag = null;
	this.divDebug = null;
	
	this.createElement = function(elemType,attribs){
		 var elem = document.createElement(elemType);
		 if(attribs){
			for(var key in attribs){
				elem.setAttribute(key,attribs[key]);
			}
		 }
		 return elem;
	};
	this.safelyRemoveElement = function(elem){
		if(elem) elem.parentNode.removeChild(elem);
	};
	this.safelyRemoveElementById = function(id){
		this.safelyRemoveElement(document.getElementById(id));
	};
	
	this.ready = function ready(fn) {
		if (document.readyState != 'loading'){
		  fn();
		} else if (document.addEventListener) {
		  document.addEventListener('DOMContentLoaded', fn);
		} else {
		  document.attachEvent('onreadystatechange', function() {
		    if (document.readyState != 'loading')
		      fn();
		  });
		}
	};
	

	this.init = function(config){
		//var divLowLag = document.getElementById("lowLag");
		this.safelyRemoveElement(this.divLowLag);
		this.divLowLag = this.createElement("div",{"id":"lowLag"});
		document.body.appendChild(this.divLowLag);
		
	
		
		var force = undefined;
		if(config != undefined){
			if(config['force'] != undefined){
				force = config['force'];
			} 
			if(config['audioTagTimeToLive'] != undefined){
				lowLag.audioTagTimeToLive = config['audioTagTimeToLive'];
			} 
			if(config['sm2url'] != undefined){
				lowLag.sm2url = config['sm2url'];
			} 
			if(config['urlPrefix'] != undefined){
				lowLag.soundUrl = config['urlPrefix'];
			} 
			if(config['debug'] != undefined){
				lowLag.debug = config['debug'];
			} 
			if (config['useSuspension'] != undefined) {
				lowLag.useSuspension = config['useSuspension'];
			}
			if (config['suspendDelay'] != undefined) {
				lowLag.suspendDelay = config['suspendDelay'];
			}
		}
		
		if(lowLag.debug == "screen" || lowLag.debug == "both"){
			lowLag.divDebug = lowLag.createElement("pre");
			lowLag.divLowLag.appendChild(lowLag.divDebug);
			
		}
		

		var format = "sm2";
		if(force != undefined) format = force;
		else {
			if(typeof(webkitAudioContext) != "undefined") format = 'webkitAudio';
			else if(navigator.userAgent.indexOf("Firefox")!=-1) format = 'audioTag';
		}
		switch(format){
			case 'webkitAudio':

				this.msg("init webkitAudio");
				this.load= this.loadSoundWebkitAudio;
				this.play = this.playSoundWebkitAudio;
				this.webkitAudioContext = new webkitAudioContext();
				if (this.useSuspension &= ('suspend' in lowLag.webkitAudioContext && 'onended' in lowLag.webkitAudioContext.createBufferSource())) {
					this.playingQueue = [];
					this.suspendPlaybackWebkitAudio();
				}
			break;
			case 'audioTag':
				this.msg("init audioTag");
				this.load= this.loadSoundAudioTag;
				this.play = this.playSoundAudioTag;
			break;

			case 'sm2':
				this.msg("init SoundManager2");

				this.load = this.loadSoundSM2;
				this.play = this.playSoundSM2;
				lowLag.msg("loading SM2 from "+lowLag.sm2url);
				soundManager.setup({ url: lowLag.sm2url, useHighPerformance:true, 
					onready:lowLag.sm2Ready , debugMode: true})


			break;

		}		


	}
	this.sm2IsReady = false;
//sm2 has a callback that tells us when it's ready, so we may need to store
//requests to loadsound, and then call sm2 once it has told us it is set.
	this.sm2ToLoad = [];

	this.loadSoundSM2 = function(url,tag){
		if(lowLag.sm2IsReady){
			lowLag.loadSoundSM2ForReals(url,tag);
		} else {
			lowLag.sm2ToLoad.push([url,tag]);
		}
	}

	this.loadSoundSM2ForReals = function(urls,ptag){
		var tag = lowLag.getTagFromURL(urls,ptag);
		lowLag.msg('sm2 loading '+urls+' as tag ' + tag);
		var urls = lowLag.getURLArray(urls); //coerce
		for(var i = 0; i < urls.length; i++){
			var url = lowLag.soundUrl + urls[i];
			urls[i] = url;
		}

		soundManager.createSound({
			id: tag,
			autoLoad: true,
			url: urls
		});
	};

	this.sm2Ready = function(){
		lowLag.sm2IsReady = true;
		for(var i = 0 ; i < lowLag.sm2ToLoad.length; i++){
			var urlAndTag = lowLag.sm2ToLoad[i];
			lowLag.loadSoundSM2ForReals(urlAndTag[0],urlAndTag[1]);
		}
		lowLag.sm2ToLoad = [];
	}

	this.playSoundSM2 = function(tag){
		lowLag.msg("playSoundSM2 "+tag);

		soundManager.play(tag);
	}



//we'll use the tag they hand us, or else the url as the tag if it's a single tag,
//or the first url 
	this.getTagFromURL = function(url,tag){
		if(tag != undefined) return tag;
		return lowLag.getSingleURL(url);
	}
	this.getSingleURL = function(urls){
		if(typeof(urls) == "string") return urls;
		return urls[0];
	}
//coerce to be an array
	this.getURLArray = function(urls){
		if(typeof(urls) == "string") return [urls];
		return urls;
	}




	this.webkitPendingRequest = {};


	this.webkitAudioContext = undefined;
	this.webkitAudioBuffers = {};

	this.loadSoundWebkitAudio = function(urls,tag){
		var url = lowLag.getSingleURL(urls);
		var tag = lowLag.getTagFromURL (urls,tag);
		lowLag.msg('webkitAudio loading '+url+' as tag ' + tag);
		var request = new XMLHttpRequest();
		request.open('GET', lowLag.soundUrl + url, true);
		request.responseType = 'arraybuffer';

		// Decode asynchronously
		request.onload = function() {
			lowLag.webkitAudioContext.decodeAudioData(request.response, function(buffer) {
				lowLag.webkitAudioBuffers[tag] = buffer;
				
				if(lowLag.webkitPendingRequest[tag]){ //a request might have come in, try playing it now
					lowLag.playSoundWebkitAudio(tag);
				}
			}, lowLag.errorLoadWebkitAudtioFile);
		};
		request.send();
	}

	this.errorLoadWebkitAudtioFile = function(e){
		lowLag.msg("Error loading webkitAudio: "+e);
	}

	this.playSoundWebkitAudio= function(tag){
		lowLag.msg("playSoundWebkitAudio "+tag);
		var buffer = lowLag.webkitAudioBuffers[tag];
		if(buffer == undefined) { //possibly not loaded; put in a request to play onload
			lowLag.webkitPendingRequest[tag] = true;
			return;
		}
		var context = lowLag.webkitAudioContext;
		if (this.useSuspension && this.suspended) {
			this.resumePlaybackWebkitAudio(); // Resume playback
		}
		var source = context.createBufferSource(); // creates a sound source
		source.buffer = buffer;                    // tell the source which sound to play
		source.connect(context.destination);       // connect the source to the context's destination (the speakers)
		if (typeof(source.noteOn) == "function") {
			source.noteOn(0);                          // play the source now, using noteOn
		} else {
			if (this.useSuspension) {
				this.playingQueue.push(tag);
				source.onended = function(e) {
					lowLag.hndlOnEndedWebkitAudio(tag, e);
				}
			}
			source.start();				// play the source now, using start
		}
	}

	this.hndlOnEndedWebkitAudio = function(tag, e){
		for (var i = 0; i < this.playingQueue.length; i++ ) {
			if (this.playingQueue[i] == tag) {
				this.playingQueue.splice(i,1);
				break;
			}
		}
		if (!this.playingQueue.length) {
			this.suspendPlaybackWebkitAudio();
		}
	}

	this.resumePlaybackWebkitAudio = function(){
		this.webkitAudioContext.resume();
		this.suspended = false;
	}

	this.suspendPlaybackWebkitAudio = function(){
		if (this.suspendTimeout) {
			clearTimeout(this.suspendTimeout);
		}
		this.suspendTimeout = setTimeout(function(){
			lowLag.webkitAudioContext.suspend();
			lowLag.suspended = true;
			lowLag.suspendTimeout = null;
		}, this.suspendDelay);
	}








	this.audioTagID = 0;
	this.audioTagNameToElement = {};

	this.loadSoundAudioTag = function(urls,tag){
		var id = "lowLagElem_"+lowLag.audioTagID++;

		var tag = lowLag.getTagFromURL(urls,tag);
		
		var urls = lowLag.getURLArray(urls);


		lowLag.audioTagNameToElement[tag] = id;

		lowLag.msg('audioTag loading '+urls+' as tag ' + tag);
		var audioElem = this.createElement("audio",{"id":id, "preload":"auto", "autobuffer":"autobuffer"})
		
		for(var i = 0; i < urls.length; i++){
			var url = urls[i];
			var type = "audio/"+lowLag.getExtension(url);
			var sourceElem = this.createElement("source",{"src":lowLag.soundUrl+url,"type":type});
			audioElem.appendChild(sourceElem);
		}
		
		document.body.appendChild(audioElem);
	}

	this.playSoundAudioTag = function(tag){
		lowLag.msg("playSoundAudioTag "+tag);

		var modelId = lowLag.audioTagNameToElement[tag];
		var cloneId = "lowLagCloneElem_"+lowLag.audioTagID++;
		
		var modelElem = document.getElementById(modelId);
		var cloneElem = modelElem.cloneNode(true);
		cloneElem.setAttribute("id",cloneId);
		this.divLowLag.appendChild(cloneElem);
		lowLag.msg(tag);
		if(lowLag.audioTagTimeToLive != -1){
			setTimeout(function(){
					lowLag.safelyRemoveElement(cloneElem);
				},lowLag.audioTagTimeToLive);
		}
		cloneElem.play();
		
	}


	this.getExtension = function(url){
		return url.substring(url.lastIndexOf(".")+1).toLowerCase();

	}


	this.msg = function(m){
		m = "-- lowLag "+m;
		if(lowLag.debug == 'both' || lowLag.debug == 'console'){
			console.log(m);
		}
		if(lowLag.divDebug){
			lowLag.divDebug.innerHTML += m+"\n";			
		}
	}
}

scripts

<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://ena-n.com/lowLag/sm2/js/soundmanager2.js"></script>
<script src="https://ena-n.com/lowLag/script/mpc.js?v=35"></script>

style.scss

@font-face {
    font-family: wildride;
    src: url(https://db.onlinewebfonts.com/t/af7ade006a7abefab27a8e9eb625962e.woff);
}

@import url(https://db.onlinewebfonts.com/c/55a6d4d1fcbcc07be6d153b5a4a130f8?family=wildride);

$enacream: rgba(230, 225, 196, 0.90196);
$enablue: #5cabe1;
$enadarkblue: #2179b6;
$enagrey: #535658;
$enalightgrey: #6b7073;
$enafontcolor: darken($enagrey, 30%);
$salmon: #e0301e;

a {
    text-decoration: none;
color: $enablue;
  text-shadow: 0.02em 0.02em darken($enafontcolor, 10%);
}
a:hover {
    text-decoration: none;
color: darken($enablue, 15%);
  text-shadow: 0.02em 0.02em darken($enacream, 20%);
}

body {
 background:$salmon;
 font:normal 75% "helvetica neue",helvetica,verdana,arial,tahoma,"times new roman","sans serif";
 color:$enafontcolor;
// width: 100%;
   height: 100%;
 //   margin: 0;
 //   padding: 0;
  margin:0px;
 padding:0px;
}

#background {
 
background-color:$enacream;
  
}

#site {
 position:relative;
 top:0.3em;
 width: 98%;
 left:0.7%;
 z-index:2;
 background:darken($enadarkblue, 15%);
padding:0.014em;
  border-radius:1em;
  border:0.3em solid rgba(255,255,255,0.25);
  text-align:center;
}

#site titrrre{
  display: inline-block;
  position: absolute;
  clear: left;
  float: left;
  width: 100%;
}

#site playlist{
  display: inline-block;
  width: 100%;
  text-align: center;
}

#site h1 {
  position: relative;
  text-align: center;
 color: $salmon;
 font-family: wildride;
 font-size: 6em;
 line-height: 0;
 text-align: center;
 
}

#site h1:hover {
 
 color: darken($enacream, 20%);
 font-family: wildride;
 font-size: 6em;
 text-align: center;
 
}

#site h2 {
  text-align: center;
  margin-top: 7%;
  margin-left: 2%;
  display: inline-block;
  position: relative;
  color: $enacream;
}

#site h2:hover {
  color: $enagrey;
}

#site h2.activ{
  text-align: center;
  margin-top: 7%;
  margin-left: 2%;
  display: inline-block;
  position: relative;
  color: $salmon;
}

#site h2.activ:hover {
  color: $enalightgrey;
}


#site p {
  text-align: center;
  position: absolute;
  font-size: 2em;
  color: $enacream;
 margin-left: 3%;
}

#mpcblock{
  position:fixed;
  text-align: center;
  display:inline-block;
  width: 100%;
}

.clear {
 float:none;
 clear:both;
 font-size:1px;
 line-height:1px;
 height:1px;
 overflow:hidden;
}

#mpcvent {
 position:relative;
 left:70%;
 margin-left:-18em;
 margin-top:-9.5em;
 background:#333 url(https://ena-n.com/MPC/image/mpcvent.png?v=456999) no-repeat;
 background-size: contain;
 width:29em;
 _width:37.3em;
 padding-bottom:9em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
}

#mpckey {
 position:relative;
 left:70%;
margin-top:0.5em;
margin-left:-50em;
 background:#333 url(https://ena-n.com/MPC/image/mpckey.png?v=45699999) no-repeat;
 background-size: contain;
 width:31em;
 _width:39.3em;
 padding-bottom:30.5em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
}

#screen {
 position:relative;
 left:70%;
 margin-top:1.5em;
 margin-left:-50em;
 background:#333 url(https://ena-n.com/MPC/image/screenmpc.png?v=456999) no-repeat;
 background-size: contain;
 width:31em;
_width:39.3em;
 padding-bottom:9em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
}

#mpc {
 position:relative;
left:70%;
margin-left:-18em;
margin-top: -31em;
 width:29em;
_width:37.3em;
 border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:12px;
 z-index:2;
} 

#mpc #wrapper {
 position:relative;
 background:#333;
 background:rgba(0,0,0,0.5);
 background:#333 url(https://ena-n.com/MPC/image/mpcfond.png?v=456999) no-repeat;
 background-size:100%;
 padding:0.5em;
 border-radius:7px;
}


#mpc ul {
 margin:0px;
 padding:0px;
 margin-left:2px;
 *margin-left:1em;
 _margin-left:2px;
 padding:2px 0px 2px 0px;
}

#mpc ul li {
 position:relative;
 float:left;
 display:inline;
 width:7em;
 height:7em;
 margin:0.5em;
 border:1px solid rgba(0,0,0,0.75);
 border-radius:5px;
 font:normal 1em/1em "helvetica",verdana,arial,system;
 padding:0.5em;
 cursor:pointer;
 cursor:hand;
 color:#eee;
 text-transform:uppercase;
 font-weight:bold;
}

#mpc ul li span {
 text-transform:none;
 font-weight:normal;
 color:#ccc;
}

#mpc ul li.active {
 background:#666;
}

 #mpc ul li div {
 /* progress indicator */
 position:absolute;
 left:0px;
 bottom:5em;
 font-size:1em;
 line-height:1em;
 height:1em;
 margin:0px 0px 0px 4em;
 width:2em;
 background:#888 url(./image/progress.png) no-repeat -256px 0px;
 background-repeat:no-repeat;
 border:1px solid #666;
 visibility:hidden;
}

#mpc ul li.active div,
#mpc ul li.loading div {
 visibility:visible;
}

#soundmanager-debug {
 position:absolute;
 right:20px;
 bottom:20px;
 height:12em;
 width:50em;
 overflow:auto;
 margin-left:1em;
}

#soundmanager-debug div {
 font-size:11px;
 font-family: "lucida console",system,verdana,arial; /* IE doesn't seem to obey short-hand font family here? */
 padding:0px 1em 0.5em 0px;
}

#mpc-debug,
.note {
 color:#999;
}

#mpc-debug a,
.note a {
 color:#6699cc;
 text-decoration:none;
}

#isHTML5 {
 display:none;
}

@media all and (max-width: 670px){
  #site {
 position:relative;
 top:0;
 width: 100%;
 left:0;
 z-index:2;
 background:darken($enadarkblue, 15%);
padding:0.014em;
  border-radius:0em;
    border:0em solid rgba(255,255,255,0.25);
  text-align:left;
}
  #site h1 {
  margin-left: 0.2em;
    margin-top: 0.7em;
  position: relative;
  text-align: left;
 color: $salmon;
 font-family: wildride;
 font-size: 3em;
 line-height: 0;

 
}

#site h1:hover {
 
 color: darken($enacream, 20%);
 font-family: wildride;
 font-size: 3em;
 text-align: left;
 
}
  
  #site playlist{
    text-align:left;
    margin-top: 1.2em;
   // width: 50%
    
  }
  #site h2{
    margin-top: 0em;
    margin-right: 0em;
    font-size:1.2em;
  }
  #screen{
    border:none;
    height:0px;
    width:0px;
  }
  
  #mpckey{
    border:none;
    height:0px;
    width:0px;
  }
  #site p{
    font-size: 0em;
    border:none;
    height:0px;
    width:0px;
  }
  #mpcvent {
// position:relative;
left:0;
margin-left:0.2em;
margin-top:-9.5em;
 background:#333 url(https://ena-n.com/MPC/image/mpcvent.png?v=456999) no-repeat;
// background-size: contain;
 width:29em;
_width:37.3em;
 padding-bottom:7em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
  }
  
  #mpc {
     position:relative;
  left:0;
  margin-left:0.2em;
  margin-top: -30.5em;
 width:29em;
_width:37.3em;
 border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:12px;
 z-index:2;
  }
}
 @media all and (max-width: 980px) and (min-width: 671px)
{
  #site h1 {
    margin-left: 0.2em;
  position: relative;
  text-align: left;
 color: $salmon;
 font-family: wildride;
 font-size: 6em;
 line-height: 0;

 
}

#site h1:hover {
 
 color: darken($enacream, 20%);
 font-family: wildride;
 font-size: 6em;
 text-align: left;
 
}
  
  #site playlist{
    text-align:right;
    
  }
  #site h2{
    margin-right: 0.2em;
  }
  #screen{
    border:none;
    height:0px;
    width:0px;
  }
  #mpckey{
    border:none;
    height:0px;
    width:0px;
  }
  
}

@media all and (max-width: 1024px) and (min-width:981px)
{
  #screen{
    border:none;
    height:0px;
    width:0px;
  }
  #mpckey{
    border:none;
    height:0px;
    width:0px;
  }
  #mpcvent {
    position:relative;
left:54%;
margin-left:-18em;
margin-top:-9.5em;
 background:#333 url(https://ena-n.com/MPC/image/mpcvent.png?v=456999) no-repeat;
// background-size: contain;
 width:29em;
_width:37.3em;
 padding-bottom:7em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
  }
  #mpc {
     position:relative;
  left:54%;
  margin-left:-18em;
  margin-top: -30.5em;
 width:29em;
_width:37.3em;
 border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:12px;
 z-index:2;
  }
}

@media all and (min-width: 1024px) and (max-width:1250px)
{
  #screen{
 position:relative;
left:84%;
 margin-top:1.5em;
margin-left:-50em;
 background:#333 url(https://ena-n.com/MPC/image/screenmpc.png?v=456999) no-repeat;
 background-size: contain;
 width:31em;
_width:39.3em;
 padding-bottom:9em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
  }
  #mpckey{
  position:relative;
left:84%;
margin-top:2.5em;
margin-left:-50em;
 background:#333 url(https://ena-n.com/MPC/image/mpckey.png?v=45699999) no-repeat;
// background-size: contain;
 width:31em;
_width:39.3em;
 padding-bottom:28em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
  }
  #mpcvent {
    position:relative;
left:84%;
margin-left:-18em;
margin-top:-9.5em;
 background:#333 url(https://ena-n.com/MPC/image/mpcvent.png?v=456999) no-repeat;
// background-size: contain;
 width:29em;
_width:37.3em;
 padding-bottom:7em;
border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:3px;
  }
  #mpc {
     position:relative;
left:84%;
margin-left:-18em;
margin-top: -30.5em;
 width:29em;
_width:37.3em;
 border:3px solid #666;
 border:3px solid rgba(255,255,255,0.25);
 border-radius:12px;
 z-index:2;
  }
}