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

Fixed linear easing function.

Browse Source
This commit is contained in:
Harrison Deng
2022-04-18 15:11:42 -05:00
parent ad6c4b15e4
commit 5313d20fff
14 changed files with 4403 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tutorials/MusicPlayer.html
View File

@@ -63,8 +63,8 @@
const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music");
playlist.add("https://res.sys.reslate.xyz/dl/audio/moments.mp3", "Moments", "Lost Identities x Robbie Rosen");
playlist.add("https://res.sys.reslate.xyz/dl/audio/XXI.mp3", "XXI", "QR");
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();

75
tutorials/VisMusicPlayer.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./assets/css/prism.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<body>
<div>
<h1>Visualizing Music</h1>
<p>This is the fun part. We can use a {@link module:player/VisualizedMusicPlayer} and a {@link module:player/MusicPlaylist} to create a music player that is like {@link module:player/MusicPlayer} but with the ability to automatically fetch the current {@link module:visualization/Visualizer}. On top of that, it then routes that visualizer data to {@link module:visualization/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 a plethora of element style properties? Take a look at {@link module:mapping/mappings}!</li>
<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:mapping/text} module!</li>
</ul>
</div>
<div>
<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">
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>
<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 id="playback-ctrls">
</div>
</div>
<div>
<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>
<div class="result">
<div id="width-map-demo" style="height: 2rem; background-color: black;"></div>
</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");
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);
const widthElem = document.getElementById("width-map-demo");
console.log("attempting to map");
ask.mappings.dimensions.mapWidth({
element: widthElem,
growLower: 2,
growUpper: 5,
unit: "rem",
lowerBin: 0,
upperBin: 128,
visUpdateRouter: player.visUpdateRouter,
interpolator: ask.support.easings.createEaseLinear(1)
});
</script>
</body>
</html>