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

Improved the visual music player tutorial page stylings.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-19 18:14:00 -05:00
parent 81c2274c1e
commit 5c8caba30c
2 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
tutorials/VisMusicPlayer.html
View File

@ -8,7 +8,7 @@
</head>
<body>
<div>
<section>
<h1>Visualizing Music</h1>
<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>
This library comes with a variety of mapping tools:
@ -17,8 +17,8 @@
<li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li>
<li>We even do font size and color with the {@link module:mappings/text} module!</li>
</ul>
</div>
<div>
</section>
<section>
<h2>Instantiation</h2>
<p>Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.</p>
<pre><code class="language-js">
@ -26,18 +26,23 @@
const playlist = previousPlaylist; // We are assuming you have a playlist ready.
const player = new ask.player.VisualizedMusicPlayer(playlist) // Creates a new music player with the playlist.
</code></pre>
</div>
</section>
<section>
<div>
<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>
</section>
<section>
<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!</p>
<h3>The first one here shows mapping the width.</h3>
<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>
@ -55,8 +60,10 @@
interpolator: ask.support.easings.createEaseLinear(2.5) // an interpolation function to make transitions between frames cleaner.
});
</code></pre>
<h3>This next one does the same, except with height.</h3>
</div>
<div class="part">
<h3>Mapping Height</h3>
<p>This next one does the same, except with height.</p>
<div class="result" style="height: 10rem;">
<div id="height-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
</div>
@ -73,9 +80,10 @@
interpolator: ask.support.easings.createEaseLinear(2.5)
});
</code></pre>
<h3>What's that? you want multiple mappings on one?</h3>
<p>Of course it's possible</p>
</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>
@ -95,6 +103,7 @@
ask.mappings.dimensions.mapHeight(squareElemConf);
</code></pre>
</div>
</section>
<script>
const ask = window.audioshowkit;

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

@ -10,3 +10,7 @@
align-items: center;
box-shadow: inset 0 0 10px rgb(133, 133, 133);
}
.part {
margin-bottom: 2.5em;
}