افکتهای زیبا برای نمایش رسانه - Media PopUp Effect ( نمونه 10) : پخش صدا

آخرین مطالب

امکانات وب

افکتهای زیبا برای نمایش رسانه - Media PopUp Effect ( نمونه 10) : پخش صدا

;(function(window){

'use strict';

// From https://www.html5rocks.com/en/tutorials/webaudio/intro/

functionBufferLoader(context,urlList,callback){

this.context=context;

this.urlList=urlList;

this.onload=callback;

this.bufferList=newArray();

this.loadCount=0;

}

BufferLoader.prototype.loadBuffer=function(url,index){

// Load buffer asynchronously

varrequest=newXMLHttpRequest();

request.open("GET",url,true);

request.responseType="arraybuffer";

varloader=this;

request.onload=function(){

// Asynchronously decode the audio file data in request.response

loader.context.decodeAudioData(

request.response,

function(buffer){

if(!buffer){

alert('error decoding file data: '+url);

return;

}

loader.bufferList[index]=buffer;

if(++loader.loadCount==loader.urlList.length)

loader.onload(loader.bufferList);

function(error){

console.error('decodeAudioData error',error);

}

);

}

request.onerror=function(){

alert('BufferLoader: XHR error');

}

request.send();

}

BufferLoader.prototype.load=function(){

for(vari=0;i<this.urlList.length;++i)

this.loadBuffer(this.urlList[i],i);

}

// Detect mobile. From: http://stackoverflow.com/a/11381730/989439

functionmobilecheck(){

varcheck=false;

returncheck;

}

// Closest ancestor element that has a specific class. From: http://stackoverflow.com/a/22119674

functionfindAncestor(el,cls){

while((el=el.parentElement)&&!el.classList.contains(cls));

returnel;

}

// getElementById shorthand function.

function$(id){returndocument.getElementById(id);};

functionMediaRevealer(el){

this.el=el;

this.contentEl=findAncestor(this.el,'content');

this.mediaEl=this.contentEl.querySelector('.pop-media[data-pop-media="'+this.el.getAttribute('data-pop-media')+'"]');

// Check if any data-pop-width and data-pop-height values were passed.

varw=0,h=0;

if(this.mediaEl.getAttribute('data-pop-width')!=undefined){

w=this.mediaEl.getAttribute('data-pop-width')+'px';

}

if(this.mediaEl.getAttribute('data-pop-height')!=undefined){

h=this.mediaEl.getAttribute('data-pop-height')+'px';

}

/* Special cases */

varself=this;

// Video:

if(this.mediaEl.tagName.toLowerCase()==='video'){

this.plyr=findAncestor(this.mediaEl,'plyr')||this.mediaEl.parentNode;

this.plyr.addEventListener('canplay',function(){

player.setVolume(0);

self.plyrReady=true;

});

this.plyr.addEventListener('ended',function(){

player.seek(0);

player.play();

});

}

// Slideshow:

elseif(this.mediaEl.classList.contains('pop-media--slideshow')){

this.slideshow=newSlideshow(this.mediaEl);

}

// Audio (Audio API):

elseif(this.mediaEl.classList.contains('pop-media--audio')){

this._createAudio();

}

this.mediaEl.style.width=w?w:null;

this.mediaEl.style.height=h?h:null;

}

MediaRevealer.prototype._createAudio=function(){

varself=this,bufferLoader=null;

bufferLoader=newBufferLoader(context,['song1.mp3'],function(bufferList){

self.bufferList=bufferList;

});

bufferLoader.load();

};

MediaRevealer.prototype.playAudio=function(){

this.audioStopped=false;

if(this.bufferList){

this.audio=context.createBufferSource();

this.audio.buffer=this.bufferList[0];

this.gainNode=context.createGain();

this.audio.connect(this.gainNode);

this.gainNode.connect(context.destination);

this.gainNode.gain.value=0.4;

this.audio.start(0);

varself=this;

this.audio.onended=function(){

if(!self.audioStopped){

self.playAudio();

}

};

MediaRevealer.prototype.stopAudio=function(){

if(this.bufferList&&this.audio){

this.audio.stop(0);

this.audioStopped=true;

}

};

MediaRevealer.prototype.positionMedia=function(){

varelOffset=this.el.getBoundingClientRect(),

contentOffset=this.contentEl.getBoundingClientRect();

this.mediaEl.style.top=parseFloat((elOffset.top+this.el.offsetHeight/2)-contentOffset.top-this.mediaEl.offsetHeight/2)+'px';

this.mediaEl.style.left=parseFloat((elOffset.left+this.el.offsetWidth/2)-contentOffset.left-this.mediaEl.offsetWidth/2)+'px';

};

MediaRevealer.prototype.resetMedia=function(){

this.mediaEl.style.WebkitTransform=this.mediaEl.style.transform='none';

this.mediaEl.style.opacity=0;

};

functioninit(){

// Preload all images.

imagesLoaded(document.querySelector('.content'),{background:true},function(){

document.body.classList.remove('loading');

initEvents();

});

}

functioninitEvents(){

varisMobile=mobilecheck(),

evOn=!isMobile?'mouseenter':'touchstart',

evOff=!isMobile?'mouseleave':'touchend';

/**************************** effect10 - audio api ****************************/

vart10=newMediaRevealer($('trigger-10'));

t10.el.addEventListener(evOn,function(ev){

clearTimeout(triggertimeout);

triggertimeout=setTimeout(function(){

anime.remove(t10.mediaEl);

t10.positionMedia();

t10.mediaEl.style.opacity=1;

anime({

targets:t10.mediaEl,

duration:1000,

easing:'linear',

rotateZ:360,

loop:true

});

t10.playAudio();

},triggerdelay);

});

t10.el.addEventListener(evOff,function(ev){

clearTimeout(triggertimeout);

anime.remove(t10.mediaEl);

t10.resetMedia();

t10.stopAudio();

});

vartouchStartFix=function(){

varbuffer=context.createBuffer(1,1,22050);

varsource=context.createBufferSource();

source.buffer=buffer;

source.connect(context.destination);

source.start(0);

window.removeEventListener('touchstart',self.touchStartFix);

};

window.addEventListener('touchstart',touchStartFix);

}

// setTimeouts for the mouseenter events.

vartriggertimeout,triggerdelay=50;

// Audio related.

window.AudioContext=window.AudioContext||window.webkitAudioContext;

varcontext=newAudioContext();

init();

})(window);

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 638 تاريخ : شنبه 23 ارديبهشت 1396 ساعت: 13:24

افکتهای زیبا برای نمایش رسانه - Media PopUp Effect ( نمونه 10) : پخش صدا

آخرین مطالب

امکانات وب

افکتهای زیبا برای نمایش رسانه - Media PopUp Effect ( نمونه 10) : پخش صدا

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه