87 lines
4.9 KiB
HTML
87 lines
4.9 KiB
HTML
<link rel="stylesheet" href="./assets/css/main.css" />
|
|
<script src="./assets/js/prism.js" defer></script>
|
|
<script src="./assets/js/audioshowkit.js"></script>
|
|
|
|
<div class="part">
|
|
<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:
|
|
<ul>
|
|
<li>Want to map ranges of frequency bins to width, height, and other dimensions related properties? Take a look at {@link module:mappings/numeric} and {@link module:mappings/dimensions}!</li>
|
|
<li>Check out {@link module:patterns/canvas} for built in canvas patterns.</li>
|
|
<li>We even do font color in the {@link module:mappings/coloring} module!</li>
|
|
</ul>
|
|
</div>
|
|
<div class="part">
|
|
<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.
|
|
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>
|
|
<div class="part">
|
|
<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">
|
|
</div>
|
|
<div id="playback-ctrls">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="part">
|
|
<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">
|
|
<div id="width-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
|
|
</div>
|
|
<p>Here, we 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">
|
|
ask.mappings.dimensions.width({ // The mapping function.
|
|
element: document.getElementById("width-map-demo"), // The element this mapping applies to.
|
|
growLower: 2, // The smallest value the width can be.
|
|
growUpper: 8, // The largest value the width can be.
|
|
unit: "rem", // The unit used for the above two values.
|
|
lowerBin: 24, // The lower bin to map to.
|
|
upperBin: 60, // The upper bin to map to.
|
|
visUpdateRouter: player.visUpdateRouter, // The update router to use for the mapping.
|
|
interpolator: ask.support.easings.createEaseLinear(2.5) // The interpolation function to use.
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const ask = window.audioshowkit;
|
|
const playlist = new ask.player.MusicPlaylist("Awesome Music");
|
|
|
|
playlist.add("./assets/audio/XXI.mp3", "XXI", "QR");
|
|
playlist.add("./assets/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
|
|
playlist.add("./assets/audio/pathetique.mp3", "Pathetique", "Cryvera (Beethoven Remix)");
|
|
|
|
const playlistDisp = playlist.generatePlaylistElement();
|
|
document.getElementById("playlist-display").appendChild(playlistDisp);
|
|
const player = new ask.player.VisMusicPlayer(playlist);
|
|
const playbackCtrlsElem = document.getElementById("playback-ctrls");
|
|
const prevElem = player.generatePreviousElement();
|
|
const playElem = player.generatePlayElement();
|
|
const nextElem = player.generateNextElement();
|
|
playbackCtrlsElem.appendChild(prevElem);
|
|
playbackCtrlsElem.appendChild(playElem);
|
|
playbackCtrlsElem.appendChild(nextElem);
|
|
|
|
ask.mappings.dimensions.width({
|
|
element: document.getElementById("width-map-demo"),
|
|
growLower: 2,
|
|
growUpper: 8,
|
|
unit: "rem",
|
|
lowerBin: 24,
|
|
upperBin: 60,
|
|
visUpdateRouter: player.visUpdateRouter,
|
|
interpolator: ask.support.easings.createEaseLinear(2.5)
|
|
});
|
|
</script> |