GsuiAudioBlock
How do I make an gsuiaudioblock?
What is a gsuiaudioblock? How do you make a gsuiaudioblock? This script and codes were developed by Thomas Tortorini on 01 January 2023, Sunday.
GsuiAudioBlock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>gsuiAudioBlock</title> <link rel='stylesheet prefetch' href='css/gwjoje.css'>
<link rel='stylesheet prefetch' href='https://gridsound.github.io/gs-ui-components/gsuiAudioBlock/gsuiAudioBlock.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"> <div id="desc"> <div id="title">gsuiAudioBlock</div> <a id="main-link" href="https://github.com/gridsound/gs-ui-components/tree/master/gsuiAudioBlock">gs-ui-components / <b>gsuiAudioBlock</b></a> </div> <div id="cmp-wrapper"> <div id="wrap-bufA" class="gs-row -gsui-nocrop"></div> <div id="wrap-bufB" class="gs-row gs-row-tiny gsui-nocrop"></div> <div id="wrap-key" class="gs-row gs-row-tiny"></div> </div> <div id="params"> <ul></ul> </div>
</div>
<template id="gsuiAudioBlock"> <div class="gsuiAudioBlock"> <div class="gsuiab-bg"></div> <div class="gsuiab-head"> <span class="gsuiab-name"></span> </div> <div class="gsuiab-content"></div> <div class="gsuiab-crop gsuiab-cropA"></div> <div class="gsuiab-crop gsuiab-cropB"></div> </div>
</template> <script src='https://gridsound.github.io/gs-ui-components/gsuiAudioBlock/gsuiAudioBlock.js'></script>
<script src='https://gridsound.github.io/gs-ui-components/gsuiWaveform/gsuiWaveform.js'></script> <script src="js/index.js"></script>
</body>
</html>
GsuiAudioBlock - Script Codes CSS Codes
#cmp-wrapper { position: relative; min-width: 512px; font-size: 128px; background: none;
}
#cmp-wrapper > div { position: relative; height: 84px; margin-bottom: 20px;
}
#cmp-wrapper > div.gs-row-tiny { height: 24px;
}
.gsuiAudioBlock[data-type="key"] { width: 72px;
}
GsuiAudioBlock - Script Codes JS Codes
var uiSmpBufA = new gsuiAudioBlock(), uiSmpBufB = new gsuiAudioBlock(), uiSmpKey = new gsuiAudioBlock(), ctx = new AudioContext();
document.querySelector( "#wrap-bufA" ).append( uiSmpBufA.rootElement );
document.querySelector( "#wrap-bufB" ).append( uiSmpBufB.rootElement );
document.querySelector( "#wrap-key" ).append( uiSmpKey.rootElement );
uiSmpBufA.oncrop = function( audioBlock, status, side, e ) { console.log( "oncrop", status, side );
};
uiSmpBufA.ondrag = function( audioBlock, status, e ) { console.log( "ondrag", status );
};
uiSmpBufA.datatype( "buffer" );
uiSmpBufB.datatype( "buffer" );
uiSmpKey.datatype( "key" );
uiSmpKey.name( "c#5" );
uiSmpBufA.duration( 2 );
// uiSmpBufA.select( true );
/**/
fetch( "https://gridsound.github.io/assets/demo-files/120bpm-4s.wav" ) .then( res => res.arrayBuffer() ) .then( arrbuf => ctx.decodeAudioData( arrbuf ) ) .then( audbuf => { uiSmpBufA.name( "An audio block" ); uiSmpBufB.name( "An audio block" ); uiSmpBufA.duration( audbuf.duration ); uiSmpBufB.duration( audbuf.duration ); uiSmpBufA.updateData( audbuf, 0, audbuf.duration ); uiSmpBufB.updateData( audbuf, 0, audbuf.duration ); } );
/**/
Developer | Thomas Tortorini |
Username | mr21 |
Uploaded | January 01, 2023 |
Rating | 3 |
Size | 3,180 Kb |
Views | 4,048 |
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!
Name | Size |
GsuiKeys | 2,843 Kb |
A Pen by Thomas Tortorini | 1,906 Kb |
GsuiToggle | 2,740 Kb |
GswaBuffer | 2,544 Kb |
GsuiTimeLine | 3,424 Kb |
GsuiPopup | 2,641 Kb |
GsuiPanels | 2,629 Kb |
GsuiGridSamples | 4,732 Kb |
GsuiTrackList | 2,853 Kb |
GsuiSpanEditable | 2,445 Kb |
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!
Name | Username | Size |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Glowing Pulse Form | Jackrugile | 2,542 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Spilled Paint | Darrylhuffman | 3,894 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
My three.js practice | Esambino | 3,203 Kb |
Drop Cap | Gsaiki | 1,571 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!