GswaGroup

Developer
Thomas Tortorini
Size
4,109 Kb
Views
4,048
  1. GswaGroup Previews
  2. GswaGroup HTML Codes
  3. GswaGroup CSS Codes
  4. GswaGroup JS Codes

How do I make an gswagroup?

What is a gswagroup? How do you make a gswagroup? This script and codes were developed by Thomas Tortorini on 01 January 2023, Sunday.

GswaGroup Previews
IQ Test

GswaGroup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gswaGroup</title> <link rel='stylesheet prefetch' href='css/gwjoje.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main">	<div id="desc">	<div id="title">gswaGroup</div>	<a id="main-link" href="https://github.com/gridsound/gs-webaudio-library/tree/master/gswaGroup">gs-webaudio-library / <b>gswaGroup</b></a>	</div>
<pre id="cmp-wrapper">
var <b class="ctx">ctx</b> = new AudioContext();
var <b class="cmp">compo</b> = new gswaGroup();
var <b class="drm">drumloop</b> = new gswaGroup();
var <b class="sns">snares</b> = new gswaGroup();
var <b class="kc">kick</b> = new gswaBuffer();
var <b class="sn">snare</b> = new gswaBuffer();
<b class="cmp">compo</b>.setContext( ctx );
<b class="drm">drumloop</b>.setContext( ctx );
<b class="sns">snares</b>.setContext( ctx );
<b class="kc">kick</b>.setContext( <b class="ctx">ctx</b> );
<b class="sn">snare</b>.setContext( <b class="ctx">ctx</b> );
<b class="kc">kick</b>.connect( <b class="ctx">ctx</b>.destination );
<b class="sn">snare</b>.connect( <b class="ctx">ctx</b>.destination );
Promise.all( [	<b class="kc">kick</b>.load( "<a href="https://gridsound.github.io/assets/demo-files/kick.wav">kick.wav</a>" ),	<b class="sn">snare</b>.load( "<a href="https://gridsound.github.io/assets/demo-files/snare.wav">snare.wav</a>" )
] ).then( function() {	<b class="cmp">compo</b>.addSamples( [	{ source: <b class="drm">drumloop</b>, whenBeat: 0 },	{ source: <b class="drm">drumloop</b>, whenBeat: 4, durationBeat: 3.25 },	{ source: <b class="drm">drumloop</b>, whenBeat: 8 },	{ source: <b class="drm">drumloop</b>, whenBeat: 12, durationBeat: 3.25 }	] );	<b class="drm">drumloop</b>.addSamples( [	{ source: <b class="kc">kick</b>, whenBeat: 0 },	{ source: <b class="kc">kick</b>, whenBeat: 0.5 },	{ source: <b class="sn">snare</b>, whenBeat: 1 },	{ source: <b class="kc">kick</b>, whenBeat: 1.25 },	{ source: <b class="kc">kick</b>, whenBeat: 2 },	{ source: <b class="sns">snares</b>, whenBeat: 3 }	] );	<b class="sns">snares</b>.addSamples( [	{ source: <b class="sn">snare</b>, whenBeat: 0, duration: 0.1 },	{ source: <b class="sn">snare</b>, whenBeat: 0.25, duration: 0.08 },	{ source: <b class="sn">snare</b>, whenBeat: 0.5, duration: 0.06 },	{ source: <b class="sn">snare</b>, whenBeat: 0.75, duration: 0.05 }	<span class="com">// Here, the `duration` values are in seconds.</span>	] );	<span class="com">// By updating the `snares` group we update	// its parent and grand-parents recursively.</span>	<b class="sns">snares</b>.update();	<span class="com">// `setBpm` is recursive in the children direction.	// This call will set the `drumloop` and `snares` groups	// to 120bpm as well.</span>	<b class="cmp">compo</b>.setBpm( 120 );	<a href="#"><b class="sns">snares</b>.start();</a>	<a href="#"><b class="drm">drumloop</b>.start();</a>	<a href="#"><b class="cmp">compo</b>.start().then( () => console.log( "onended" ) );</a>	<span class="com">// The `offset` and `duration` arguments of the	// `gswaGroup.start` function are in Beats.</span>	<a href="#"><b class="cmp">compo</b>.startBeat( 0, 11 );</a>	<a href="#"><b class="cmp">compo</b>.startBeat( 0, 0, 2 );</a>	<a href="#"><b class="cmp">compo</b>.startBeat( 0, 2, 2 );</a>	<a href="#"><b class="cmp">compo</b>.startBeat( 0, 0, 4 );</a>	<a href="#"><b class="cmp">compo</b>.stop();</a>	<a href="#"><b class="cmp">compo</b>.setBpm( 90 );</a>	<a href="#"><b class="cmp">compo</b>.setBpm( 120 );</a>	<a href="#"><b class="cmp">compo</b>.setBpm( 140 );</a>	<a href="#"><b class="cmp">compo</b>.setBpm( 441 );</a>	<b class="cmp">compo</b>.bpm; // <b id="cmpbpm"></b> BPM	<b class="drm">drumloop</b>.bpm; // <b id="drmbpm"></b> BPM	<b class="sns">snares</b>.bpm; // <b id="snrbpm"></b> BPM	<b class="cmp">compo</b>.duration; // <b id="cmplen"></b> Beats	<b class="drm">drumloop</b>.duration; // <b id="drmlen"></b> Beats	<b class="sns">snares</b>.duration; // <b id="snrlen"></b> Beats
} );
</pre>
</div> <script src='https://gridsound.github.io/gs-webaudio-library/gswaBuffer/gswaBuffer.js'></script>
<script src='https://gridsound.github.io/gs-webaudio-library/gswaGroup/gswaGroup.js'></script> <script src="js/index.js"></script>
</body>
</html>

GswaGroup - Script Codes CSS Codes

#cmp-wrapper { max-width: 460px; font-size: 12px;
}
#cmp-wrapper a { border-bottom: 1px dotted rgba(85, 85, 170, 0.5); color: #333;
}
#cmp-wrapper a:hover { color: #000;
}
#cmp-wrapper .com { opacity: .7;
}
#cmp-wrapper .kc { color: #43f99e;
}
#cmp-wrapper .sn { color: #d44949;
}
#cmp-wrapper .sns { color: #ec461f;
}
#cmp-wrapper .drm { color: #7d7b16;
}
#cmp-wrapper .cmp { color: #6f5abd;
}
#cmp-wrapper .sns, #cmp-wrapper .drm, #cmp-wrapper .cmp { font-style: italic;
}

GswaGroup - Script Codes JS Codes

var ctx = new AudioContext();
var compo = new gswaGroup();
var drumloop = new gswaGroup();
var snares = new gswaGroup();
var kick = new gswaBuffer();
var snare = new gswaBuffer();
var elCmpBpm = document.querySelector( "#cmpbpm" );
var elDrmBpm = document.querySelector( "#drmbpm" );
var elSnrBpm = document.querySelector( "#snrbpm" );
var elCmpLen = document.querySelector( "#cmplen" );
var elDrmLen = document.querySelector( "#drmlen" );
var elSnrLen = document.querySelector( "#snrlen" );
compo.setContext( ctx );
drumloop.setContext( ctx );
snares.setContext( ctx );
kick.setContext( ctx );
snare.setContext( ctx );
kick.connect( ctx.destination );
snare.connect( ctx.destination );
Promise.all( [	kick.load( "https://gridsound.github.io/assets/demo-files/kick.wav" ),	snare.load( "https://gridsound.github.io/assets/demo-files/snare.wav" )
] ).then( function() {	compo.addSamples( [	{ source: drumloop, whenBeat: 0 },	{ source: drumloop, whenBeat: 4, durationBeat: 3.25 },	{ source: drumloop, whenBeat: 8 },	{ source: drumloop, whenBeat: 12, durationBeat: 3.25 },	] ); drumloop.addSamples( [ { source: kick, whenBeat: 0 }, { source: kick, whenBeat: 0.5 }, { source: snare, whenBeat: 1 }, { source: kick, whenBeat: 1.25 }, { source: kick, whenBeat: 2 }, { source: snares, whenBeat: 3 }, ] ); snares.addSamples( [ { source: snare, whenBeat: 0, duration: .1 },	{ source: snare, whenBeat: 0.25, duration: .08 },	{ source: snare, whenBeat: 0.5, duration: .06 },	{ source: snare, whenBeat: 0.75, duration: .05 }, ] );	snares.update();	compo.setBpm( 120 );
} );
Array.from( document.querySelectorAll( "#cmp-wrapper a[href='#']" ) )	.forEach( function( a ) {	a.onclick = function() {	eval( a.textContent );	return false;	};	} );
requestAnimationFrame( function frame() {	elCmpBpm.textContent = compo.bpm;	elDrmBpm.textContent = drumloop.bpm;	elSnrBpm.textContent = snares.bpm;	elCmpLen.textContent = compo.duration.toFixed( 3 );	elDrmLen.textContent = drumloop.duration.toFixed( 3 );	elSnrLen.textContent = snares.duration.toFixed( 3 );	requestAnimationFrame( frame );
} );
GswaGroup - Script Codes
GswaGroup - Script Codes
Home Page Home
Developer Thomas Tortorini
Username mr21
Uploaded January 01, 2023
Rating 3
Size 4,109 Kb
Views 4,048
Do you need developer help for GswaGroup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Tortorini (mr21) Script Codes
Name
GswaBuffer
GsuiPopup
GsuiPanels
A Pen by Thomas Tortorini
GsuiGridSamples
GsuiAudioBlock
GsuiSpanEditable
GsuiTrackList
GsuiToggle
GsuiKeys
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!