ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved tutorial and generated element styling.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-19 23:11:08 -05:00
parent 5c8caba30c
commit b08a1d3963
7 changed files with 326 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/player/MusicPlayer.js
View File

@ -186,7 +186,7 @@ export default class MusicPlayer {
*/ */
generatePlayElement() { generatePlayElement() {
const playButton = document.createElement("button"); const playButton = document.createElement("button");
playButton.classList.add("player"); playButton.classList.add("music-player");
playButton.classList.add("play-btn"); playButton.classList.add("play-btn");
if (this.playing) playButton.classList.add("pause"); if (this.playing) playButton.classList.add("pause");
@ -210,7 +210,7 @@ export default class MusicPlayer {
generateNextElement() { generateNextElement() {
const nextButton = document.createElement("button"); const nextButton = document.createElement("button");
nextButton.classList.add("player"); nextButton.classList.add("music-player");
nextButton.classList.add("next"); nextButton.classList.add("next");
nextButton.addEventListener("click", () => { nextButton.addEventListener("click", () => {
this.next(); this.next();
@ -221,7 +221,7 @@ export default class MusicPlayer {
generatePreviousElement() { generatePreviousElement() {
const previousButton = document.createElement("button"); const previousButton = document.createElement("button");
previousButton.classList.add("player"); previousButton.classList.add("music-player");
previousButton.classList.add("previous"); previousButton.classList.add("previous");
previousButton.addEventListener("click", () => { previousButton.addEventListener("click", () => {
this.previous(); this.previous();

38
src/styles/music-player.css
View File

@ -0,0 +1,38 @@
button.music-player.play-btn {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}
button.music-player.play-btn.pause {
background-color: black;
color: white;
border-color: black;
}
button.music-player.next {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}
button.music-player.previous {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}

10
src/styles/music-playlist.css
View File

@ -9,15 +9,21 @@ table.music-playlist tr th {
border-left-style: none; border-left-style: none;
border-right-style: none; border-right-style: none;
background-color: lightgray; background-color: lightgray;
border-bottom-color: black;
cursor: default;
} }
table.music-playlist tr td { table.music-playlist tr td {
border-left-style: none; border-left-style: none;
border-right-style: none; border-right-style: none;
border-bottom-color: darkgray;
} }
table.music-playlist .active { table.music-playlist tr {
cursor: pointer;
}
table.music-playlist tr.active {
background-color: gray; background-color: gray;
color: white; color: white;
} }

150
tutorials/MusicPlayer.html
View File

@ -1,90 +1,80 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" /> <h1>Creating a Music Player</h1>
<script src="./assets/js/prism.js" defer></script> <p>One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.</p>
<script src="./assets/js/audioshowkit.js"></script> </div>
</head> <div class="part">
<h2>Instantiating a Music Player</h2>
<p>Instantiating a music player requires a {@link MusicPlaylist}. See the [MusicPlaylist tutorial]{@tutorial MusicPlaylist} for information on how to get one of those! Once you have one, you can proceed with instantiating a Music Player.</p>
<pre><code class="language-js">
const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
const playlist = previousPlaylist; // We are assuming you have a playlist ready.
const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist.
</code></pre>
<body> <p>We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.</p>
<div> <div class="result">
<h1>Creating a Music Player</h1> <div id="playlist-display">
<p>One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.</p>
</div>
<div>
<h2>Instantiating a Music Player</h2>
<p>Instantiating a music player requires a {@link MusicPlaylist}. See the [MusicPlaylist tutorial]{@tutorial MusicPlaylist} for information on how to get one of those! Once you have one, you can proceed with instantiating a Music Player.</p>
<pre><code class="language-js">
const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
const playlist = previousPlaylist; // We are assuming you have a playlist ready.
const player = new ask.player.MusicPlayer(playlist) // Creates a new music player with the playlist.
</code></pre>
<p>We'll also show the playlist display so you can see how it updates corresponding to the music currently selected.</p>
<div class="result">
<div id="playlist-display">
</div>
</div> </div>
</div> </div>
<div> </div>
<h2>Display a Play Button</h2> <div class="part">
<p>We need some user interactive element to start playing music. You can set this up yourself, or use a generated one by us! We'll show you how to do the latter, but feel free to read the documentation on all the methods available that can be used in event listeners to see how to do the former.</p> <h2>Display a Play Button</h2>
<pre><code class="language-js"> <p>We need some user interactive element to start playing music. You can set this up yourself, or use a generated one by us! We'll show you how to do the latter, but feel free to read the documentation on all the methods available that can be used in event listeners to see how to do the former.</p>
// Still using the same context from the instantiation example... <pre><code class="language-js">
const playElement = player.generatePlayElement(); // Still using the same context from the instantiation example...
document.getElementById("musicplayer-playbtn-demo").appendChild(playElement); // Assuming this element exists. const playElement = player.generatePlayElement();
</code></pre> document.getElementById("musicplayer-playbtn-demo").appendChild(playElement); // Assuming this element exists.
<h3>The play button</h3> </code></pre>
<p>Go ahead and hit the play button!</p> <h3>The play button</h3>
<div class="result"> <p>Go ahead and hit the play button!</p>
<div id="musicplayer-playbtn-demo"> <div class="result">
</div> <div id="musicplayer-playbtn-demo">
</div>
</div>
<div>
<h2>Similarly, Next and Previous Buttons</h2>
<p>We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.</p>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
const nextElement = player.generateNextElement();
document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElement);
const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);
</code></pre>
<h3>The next button</h3>
<div class="result">
<div id="musicplayer-nextbtn-demo">
</div>
</div>
<h3>The previous button</h3>
<div class="result">
<div id="musicplayer-prevbtn-demo">
</div>
</div> </div>
</div> </div>
<script> </div>
const ask = window.audioshowkit; <div class="part">
const playlist = new ask.player.MusicPlaylist("Awesome Music"); <h2>Similarly, Next and Previous Buttons</h2>
<p>We can also traverse the playlist by the player via a previous and next button. These buttons can be generated as well as programmed.</p>
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); <pre><code class="language-js">
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); // Still using the same context from the instantiation example...
const nextElement = player.generateNextElement();
const playlistDispElement = playlist.generatePlaylistElement(); document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElement);
document.getElementById("playlist-display").append(playlistDispElement);
const player = new ask.player.MusicPlayer(playlist);
const playElem = player.generatePlayElement();
document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);
const nextElem = player.generateNextElement();
document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElem);
const prevElem = player.generatePreviousElement(); const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem); document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);
</script> </code></pre>
</body> <h3>The next button</h3>
<div class="result">
<div id="musicplayer-nextbtn-demo">
</div>
</div>
<h3>The previous button</h3>
<div class="result">
<div id="musicplayer-prevbtn-demo">
</div>
</div>
</div>
<script>
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
</html> playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
const playlistDispElement = playlist.generatePlaylistElement();
document.getElementById("playlist-display").append(playlistDispElement);
const player = new ask.player.MusicPlayer(playlist);
const playElem = player.generatePlayElement();
document.getElementById("musicplayer-playbtn-demo").appendChild(playElem);
const nextElem = player.generateNextElement();
document.getElementById("musicplayer-nextbtn-demo").appendChild(nextElem);
const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);
</script>

130
tutorials/MusicPlaylist.html
View File

@ -1,80 +1,70 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" /> <h1>Creating a Music Playlist</h1>
<script src="./assets/js/prism.js" defer></script> <p>
<script src="./assets/js/audioshowkit.js"></script> A music playlist is a list of {@link Music} which maintains metadata about the playlist, such as the length, and the name of the playlist. It also keeps track of an index for a position in the playlist.
</head> </p>
</div>
<div class="part">
<h2>Instantiation</h2>
<p>Instantiation is simple. We grab a reference to the audioshowkit library from global, and then under the "player" path, we find the music playlist constructor.</p>
<pre><code class="language-js">
// Get the entry point to all of AudioShowKit's glory.
const ask = window.audioshowkit;
<body> // The only parameter is the name of the playlist.
<div> const playlist = new ask.player.MusicPlaylist("Awesome Music");
<h1>Creating a Music Playlist</h1> </code></pre>
<p> </div>
A music playlist is a list of {@link Music} which maintains metadata about the playlist, such as the length, and the name of the playlist. It also keeps track of an index for a position in the playlist. <div class="part">
</p> <h2>Adding Music</h2>
</div> <p>A music playlist is no good if it doesn't have music. Lets add some.</p>
<div> <pre><code class="language-js">
<h2>Instantiation</h2> // Still using the same context from the instantiation example...
<p>Instantiation is simple. We grab a reference to the audioshowkit library from global, and then under the "player" path, we find the music playlist constructor.</p>
<pre><code class="language-js">
// Get the entry point to all of AudioShowKit's glory.
const ask = window.audioshowkit;
// The only parameter is the name of the playlist. playlist.add("/assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy.
const playlist = new ask.player.MusicPlaylist("Awesome Music"); playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
</code></pre> </code></pre>
</div>
<div>
<h2>Adding Music</h2>
<p>A music playlist is no good if it doesn't have music. Lets add some.</p>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
playlist.add("/assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy. <p>If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!</p>
playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one. <pre><code class="language-js">
</code></pre> // Still using the same context from the instantiation example...
<p>If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!</p> // Either instantiate, or otherwise have this Music object.
<pre><code class="language-js"> const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
// Still using the same context from the instantiation example... playlist.addExisting(pathetiqueMusic); // Wow, a special function!
</code></pre>
</div>
<div class="part">
<h2>Display</h2>
<p>In the case you want to show the playlist without coding your own display, we provide a simple generator for you!</p>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
// Either instantiate, or otherwise have this Music object. const playlistElem = playlist.generatePlaylistElement(); // Returns an HTMLElement!
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic); // Wow, a special function!
</code></pre>
</div>
<div>
<h2>Display</h2>
<p>In the case you want to show the playlist without coding your own display, we provide a simple generator for you!</p>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
const playlistElem = playlist.generatePlaylistElement(); // Returns an HTMLElement! // Assuming we do have an acceptable element that can take a child element.
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
// Assuming we do have an acceptable element that can take a child element. </code></pre>
document.getElementById("musicplaylist-demo").appendChild(playlistElem); <div class="result">
</code></pre> <div id="musicplaylist-demo">
<div class="result">
<h3>Result</h3>
<div id="musicplaylist-demo">
</div>
</div> </div>
<script>
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy.
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic);
const playlistElem = playlist.generatePlaylistElement();
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
</script>
</div> </div>
</body> </div>
</html> <script>
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); // It's that easy.
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic);
const playlistElem = playlist.generatePlaylistElement();
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
</script>

295
tutorials/VisMusicPlayer.html
View File

@ -1,165 +1,154 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" /> <h1>Visualizing Music</h1>
<script src="./assets/js/prism.js" defer></script> <p>This is the fun part. We can use a {@link VisualizedMusicPlayer} and a {@link MusicPlaylist} to create a music player that is like {@link MusicPlayer} but with the ability to automatically fetch the current {@link Visualizer}. On top of that, it then routes that visualizer data to {@link VisualizerUpdateManager} which can be to make much more refined mappings.</p>
<script src="./assets/js/audioshowkit.js"></script> This library comes with a variety of mapping tools:
</head> <ul>
<li>Want to map ranges of frequency bins to a plethora of element style properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!</li>
<body> <li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li>
<section> <li>We even do font size and color with the {@link module:mappings/text} module!</li>
<h1>Visualizing Music</h1> </ul>
<p>This is the fun part. We can use a {@link VisualizedMusicPlayer} and a {@link MusicPlaylist} to create a music player that is like {@link MusicPlayer} but with the ability to automatically fetch the current {@link Visualizer}. On top of that, it then routes that visualizer data to {@link VisualizerUpdateManager} which can be to make much more refined mappings.</p> </div>
This library comes with a variety of mapping tools: <div class="part">
<ul> <h2>Instantiation</h2>
<li>Want to map ranges of frequency bins to a plethora of element style properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!</li> <p>Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.</p>
<li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li> <pre><code class="language-js">
<li>We even do font size and color with the {@link module:mappings/text} module!</li> const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
</ul> const playlist = previousPlaylist; // We are assuming you have a playlist ready.
</section> const player = new ask.player.VisualizedMusicPlayer(playlist) // Creates a new music player with the playlist.
<section> </code></pre>
<h2>Instantiation</h2> </div>
<p>Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.</p> <div class="part">
<h2>Playback</h2>
<p>Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information.</p>
<div class="result">
<div id="playback-ctrls">
</div>
</div>
</div>
<div class="part">
<h2>Visualization</h2>
<p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! Remember to hit the play button above to see the mappings in effect!</p>
<div class="part">
<h3>Mapping Width</h3>
<p>The first one here shows mapping the width.</p>
<div class="result">
<div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
</div>
<p>To do this, we need to perform what's called a <strong>mapping</strong> between a range of frequency bins, or a single frequency bin, and the width property of the <code>div</code> element. We can then define a multitude of parameters to specify how the mapping will work. Following is the code that produced the example above with comment annotations.</p>
<pre><code class="language-js"> <pre><code class="language-js">
const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff. const widthElem = document.getElementById("width-map-demo"); // selecting an element.
const playlist = previousPlaylist; // We are assuming you have a playlist ready. ask.mappings.dimensions.mapWidth({ // the mapping function for width.
const player = new ask.player.VisualizedMusicPlayer(playlist) // Creates a new music player with the playlist. element: widthElem, // the element to map.
growLower: 2, // the minimum width
growUpper: 8, // the maximum width
unit: "rem", // the units the minimum and maximum are described in.
lowerBin: 24, // the lower frequency bin.
upperBin: 80, // the upper frequency bin.
visUpdateRouter: player.visUpdateRouter, // the visualizer to use (we got ours from the VisMusicPlayer).
interpolator: ask.support.easings.createEaseLinear(2.5) // an interpolation function to make transitions between frames cleaner.
});
</code></pre> </code></pre>
</section> </div>
<section> <div class="part">
<div> <h3>Mapping Height</h3>
<h2>Playback</h2> <p>This next one does the same, except with height.</p>
<p>Since the usage of playback is the same as a normal {@link module:player/MusicPlayer}, see [the MusicPlayer tutorial]{@tutorial MusicPlayer} for more information.</p> <div class="result" style="height: 10rem;">
<div class="result"> <div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
<div id="playback-ctrls">
</div>
</div>
</div> </div>
</section> <pre><code class="language-js">
<section> const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called.
<h2>Visualization</h2> ask.mappings.dimensions.mapHeight({
<p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! Remember to hit the play button above to see the mappings in effect!</p> element: heightElem,
<div class="part"> growLower: 2, // height smallest can be 2 rem, tallest can be 8 rem.
<h3>Mapping Width</h3> growUpper: 8,
<p>The first one here shows mapping the width.</p> unit: "rem",
<div class="result"> lowerBin: 80, // Changed the bin range just for fun.
<div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div> upperBin: 120,
</div> visUpdateRouter: player.visUpdateRouter,
<p>To do this, we need to perform what's called a <strong>mapping</strong> between a range of frequency bins, or a single frequency bin, and the width property of the <code>div</code> element. We can then define a multitude of parameters to specify how the mapping will work. Following is the code that produced the example above with comment annotations.</p> interpolator: ask.support.easings.createEaseLinear(2.5)
<pre><code class="language-js"> });
const widthElem = document.getElementById("width-map-demo"); // selecting an element. </code></pre>
ask.mappings.dimensions.mapWidth({ // the mapping function for width. </div>
element: widthElem, // the element to map. <div class="part">
growLower: 2, // the minimum width <h3>Mapping Multiple Style Properties</h3>
growUpper: 8, // the maximum width <p>What's that? you want multiple mappings on one? Here it is!</p>
unit: "rem", // the units the minimum and maximum are described in. <div class="result" style="height: 10rem;">
lowerBin: 24, // the lower frequency bin. <div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
upperBin: 80, // the upper frequency bin.
visUpdateRouter: player.visUpdateRouter, // the visualizer to use (we got ours from the VisMusicPlayer).
interpolator: ask.support.easings.createEaseLinear(2.5) // an interpolation function to make transitions between frames cleaner.
});
</code></pre>
</div> </div>
<div class="part"> <pre><code class="language-js">
<h3>Mapping Height</h3> const squareElem = document.getElementById("square-map-demo"); // Same stuff as before..
<p>This next one does the same, except with height.</p> const squareElemConf = { // Use an object for commonly used mappings.
<div class="result" style="height: 10rem;"> element: squareElem,
<div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div> growLower: 0.5,
</div> growUpper: 8,
<pre><code class="language-js"> unit: "rem",
const heightElem = document.getElementById("height-map-demo"); // Only big difference is the function being called. lowerBin: 128,
ask.mappings.dimensions.mapHeight({ upperBin: 160,
element: heightElem, visUpdateRouter: player.visUpdateRouter,
growLower: 2, // height smallest can be 2 rem, tallest can be 8 rem. interpolator: ask.support.easings.createEaseLinear(2.5)
growUpper: 8, }
unit: "rem", ask.mappings.dimensions.mapWidth(squareElemConf); // Apply them easily!
lowerBin: 80, // Changed the bin range just for fun. ask.mappings.dimensions.mapHeight(squareElemConf);
upperBin: 120, </code></pre>
visUpdateRouter: player.visUpdateRouter, </div>
interpolator: ask.support.easings.createEaseLinear(2.5) </div>
});
</code></pre>
</div>
<div class="part">
<h3>Mapping Multiple Style Properties</h3>
<p>What's that? you want multiple mappings on one? Here it is!</p>
<div class="result" style="height: 10rem; min-width: 10rem;">
<div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
</div>
<pre><code class="language-js">
const squareElem = document.getElementById("square-map-demo"); // Same stuff as before..
const squareElemConf = { // Use an object for commonly used mappings.
element: squareElem,
growLower: 0.5,
growUpper: 8,
unit: "rem",
lowerBin: 128,
upperBin: 160,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5)
}
ask.mappings.dimensions.mapWidth(squareElemConf); // Apply them easily!
ask.mappings.dimensions.mapHeight(squareElemConf);
</code></pre>
</div>
</section>
<script> <script>
const ask = window.audioshowkit; const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music"); const playlist = new ask.player.MusicPlaylist("Awesome Music");
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR"); playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen"); playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
const player = new ask.player.VisMusicPlayer(playlist); const player = new ask.player.VisMusicPlayer(playlist);
const playbackCtrlsElem = document.getElementById("playback-ctrls"); const playbackCtrlsElem = document.getElementById("playback-ctrls");
const prevElem = player.generatePreviousElement(); const prevElem = player.generatePreviousElement();
const playElem = player.generatePlayElement(); const playElem = player.generatePlayElement();
const nextElem = player.generateNextElement(); const nextElem = player.generateNextElement();
playbackCtrlsElem.appendChild(prevElem); playbackCtrlsElem.appendChild(prevElem);
playbackCtrlsElem.appendChild(playElem); playbackCtrlsElem.appendChild(playElem);
playbackCtrlsElem.appendChild(nextElem); playbackCtrlsElem.appendChild(nextElem);
const widthElem = document.getElementById("width-map-demo"); const widthElem = document.getElementById("width-map-demo");
ask.mappings.dimensions.mapWidth({ ask.mappings.dimensions.mapWidth({
element: widthElem, element: widthElem,
growLower: 2, growLower: 2,
growUpper: 8, growUpper: 8,
unit: "rem", unit: "rem",
lowerBin: 24, lowerBin: 24,
upperBin: 60, upperBin: 60,
visUpdateRouter: player.visUpdateRouter, visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5) interpolator: ask.support.easings.createEaseLinear(2.5)
}); });
const heightElem = document.getElementById("height-map-demo"); const heightElem = document.getElementById("height-map-demo");
ask.mappings.dimensions.mapHeight({ ask.mappings.dimensions.mapHeight({
element: heightElem, element: heightElem,
growLower: 2, growLower: 2,
growUpper: 8, growUpper: 8,
unit: "rem", unit: "rem",
lowerBin: 80, lowerBin: 80,
upperBin: 120, upperBin: 120,
visUpdateRouter: player.visUpdateRouter, visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5) interpolator: ask.support.easings.createEaseLinear(2.5)
}); });
const squareElem = document.getElementById("square-map-demo"); const squareElem = document.getElementById("square-map-demo");
const squareElemConf = { const squareElemConf = {
element: squareElem, element: squareElem,
growLower: 0.5, growLower: 0.5,
growUpper: 8, growUpper: 8,
unit: "rem", unit: "rem",
lowerBin: 128, lowerBin: 128,
upperBin: 160, upperBin: 160,
visUpdateRouter: player.visUpdateRouter, visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(2.5) interpolator: ask.support.easings.createEaseLinear(2.5)
} }
ask.mappings.dimensions.mapWidth(squareElemConf); ask.mappings.dimensions.mapWidth(squareElemConf);
ask.mappings.dimensions.mapHeight(squareElemConf); ask.mappings.dimensions.mapHeight(squareElemConf);
</script> </script>
</body>
</html>

3
tutorials/assets/css/main.css
View File

@ -12,5 +12,6 @@
} }
.part { .part {
margin-bottom: 2.5em; margin-bottom: 3rem;
} }