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

Tutorial title tag sizes decreased.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-23 08:57:34 -05:00
parent d6e5f84af7
commit 01ccde22b8
4 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tutorials/MappingDemonstration.html
View File

@ -3,7 +3,7 @@
<script src="./assets/js/audioshowkit.js"></script>
<div class="part">
<h1>Mapping Demonstration</h1>
<h2>Mapping Demonstration</h2>
<p>Here we will show off some of the mappings currently in the library. This list may not be exhaustive, and you should check the actual documentation for all the mapping modules. Additionally, feel free to create your own mappings using the provided support tools!</p>
<div class="result">
<div id="playlist-display">

12
tutorials/MusicPlayer.html
View File

@ -3,11 +3,11 @@
<script src="./assets/js/audioshowkit.js"></script>
<div class="part">
<h1>Creating a Music Player</h1>
<h2>Creating a Music Player</h2>
<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 class="part">
<h2>Instantiating a Music Player</h2>
<h3>Instantiating a Music Player</h3>
<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.
@ -16,14 +16,14 @@
</code></pre>
</div>
<div class="part">
<h2>Display a Play Button</h2>
<h3>Display a Play Button</h3>
<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>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
const playElement = player.generatePlayElement();
document.getElementById("musicplayer-playbtn-demo").appendChild(playElement); // Assuming this element exists.
</code></pre>
<h3>The play button</h3>
<h4>The play button</h4>
<p>Go ahead and hit the play button!</p>
<div class="result">
<div id="musicplayer-playbtn-demo">
@ -31,7 +31,7 @@
</div>
</div>
<div class="part">
<h2>Similarly, Next and Previous Buttons</h2>
<h3>Similarly, Next and Previous Buttons</h3>
<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...
@ -41,7 +41,7 @@
const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-nav-demo").appendChild(prevElem);
</code></pre>
<h3>Produces</h3>
<h4>Produces</h4>
<p>Feel free to try the buttons and see what happens! We'll show the playlist display demonstrated in the [MusicPlaylist tutorial]{@tutorial MusicPlaylist}.</p>
<div class="result">
<div id="musicplayer-playlist-display">

8
tutorials/MusicPlaylist.html
View File

@ -3,13 +3,13 @@
<script src="./assets/js/audioshowkit.js"></script>
<div class="part">
<h1>Creating a Music Playlist</h1>
<h2>Creating a Music Playlist</h2>
<p>
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.
</p>
</div>
<div class="part">
<h2>Instantiation</h2>
<h3>Instantiation</h3>
<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.
@ -20,7 +20,7 @@
</code></pre>
</div>
<div class="part">
<h2>Adding Music</h2>
<h3>Adding Music</h3>
<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...
@ -39,7 +39,7 @@
</code></pre>
</div>
<div class="part">
<h2>Display</h2>
<h3>Display</h3>
<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...

8
tutorials/VisMusicPlayer.html
View File

@ -3,7 +3,7 @@
<script src="./assets/js/audioshowkit.js"></script>
<div class="part">
<h1>Visualizing Music</h1>
<h2>Visualizing Music</h2>
<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:
@ -14,7 +14,7 @@
</ul>
</div>
<div class="part">
<h2>Instantiation</h2>
<h3>Instantiation</h3>
<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">
const ask = window.audioshowkit; // Get a reference to the audioshowkit stuff.
@ -23,7 +23,7 @@
</code></pre>
</div>
<div class="part">
<h2>Playback</h2>
<h3>Playback</h3>
<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. We also added the playlist display to show you which song you're listening to.</p>
<div class="result">
<div id="playlist-display">
@ -33,7 +33,7 @@
</div>
</div>
<div class="part">
<h2>Visualization</h2>
<h3>Visualization</h3>
<p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! We'll demonstrate an example of the latter below, but check out [the Mapping Demonstration tutorial]{@tutorial MappingDemonstration} for many other mappings! Hit the play button to see the what the mapping did.</p>
<div class="part">
<div class="result">