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
Download Patch File Download Diff File Expand all files Collapse all files

130
tutorials/MusicPlaylist.html
View File

@@ -1,80 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head>
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<div class="part">
<h1>Creating a Music Playlist</h1>
<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>
<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>
<div>
<h1>Creating a Music Playlist</h1>
<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>
<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;
// The only parameter is the name of the playlist.
const playlist = new ask.player.MusicPlaylist("Awesome Music");
</code></pre>
</div>
<div class="part">
<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...
// The only parameter is the name of the playlist.
const playlist = new ask.player.MusicPlaylist("Awesome Music");
</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.
playlist.add("/assets/audio/XXI.mp3", "XXI", "QR"); // Let's add another one.
</code></pre>
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.
</code></pre>
<p>If for whatever reason, you decided to instantiate your own {@link Music}, that's okay too!</p>
<pre><code class="language-js">
// 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>
<pre><code class="language-js">
// Still using the same context from the instantiation example...
// Either instantiate, or otherwise have this Music object.
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 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 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!
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);
</code></pre>
<div class="result">
<h3>Result</h3>
<div id="musicplaylist-demo">
</div>
// Assuming we do have an acceptable element that can take a child element.
document.getElementById("musicplaylist-demo").appendChild(playlistElem);
</code></pre>
<div class="result">
<div id="musicplaylist-demo">
</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>
</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>