audioshowkit/tutorials/MusicPlayer.html

81 lines
3.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./assets/css/prism.css" />
<script src="./assets/js/prism.js" defer></script>
</head>
<body>
<script src="./assets/js/audioshowkit.js"></script>
<div>
<h1>Creating a Music Player</h1>
2022-04-18 23:23:12 +00:00
<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>
2022-04-18 23:23:12 +00:00
<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>
</div>
<div>
<h2>Display a Play Button</h2>
<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>
<p>Go ahead and hit the play button!</p>
<div class="result">
<div id="musicplayer-playbtn-demo">
</div>
</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>
<script>
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
2022-04-18 21:19:50 +00:00
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
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>
</body>
</html>