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

6
src/player/MusicPlayer.js
View File

@ -186,7 +186,7 @@ export default class MusicPlayer {
*/ */
generatePlayElement() { generatePlayElement() {
const playButton = document.createElement("button"); const playButton = document.createElement("button");
playButton.classList.add("player"); playButton.classList.add("music-player");
playButton.classList.add("play-btn"); playButton.classList.add("play-btn");
if (this.playing) playButton.classList.add("pause"); if (this.playing) playButton.classList.add("pause");
@ -210,7 +210,7 @@ export default class MusicPlayer {
generateNextElement() { generateNextElement() {
const nextButton = document.createElement("button"); const nextButton = document.createElement("button");
nextButton.classList.add("player"); nextButton.classList.add("music-player");
nextButton.classList.add("next"); nextButton.classList.add("next");
nextButton.addEventListener("click", () => { nextButton.addEventListener("click", () => {
this.next(); this.next();
@ -221,7 +221,7 @@ export default class MusicPlayer {
generatePreviousElement() { generatePreviousElement() {
const previousButton = document.createElement("button"); const previousButton = document.createElement("button");
previousButton.classList.add("player"); previousButton.classList.add("music-player");
previousButton.classList.add("previous"); previousButton.classList.add("previous");
previousButton.addEventListener("click", () => { previousButton.addEventListener("click", () => {
this.previous(); this.previous();

38
src/styles/music-player.css
View File

@ -0,0 +1,38 @@
button.music-player.play-btn {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}
button.music-player.play-btn.pause {
background-color: black;
color: white;
border-color: black;
}
button.music-player.next {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}
button.music-player.previous {
border-width: 2px;
border-style: solid;
border-color: gray;
padding: 0.5rem;
margin: 0.25rem;
background-color: transparent;
cursor: pointer;
border-radius: 15px;
}

10
src/styles/music-playlist.css
View File

@ -9,15 +9,21 @@ table.music-playlist tr th {
border-left-style: none; border-left-style: none;
border-right-style: none; border-right-style: none;
background-color: lightgray; background-color: lightgray;
border-bottom-color: black;
cursor: default;
} }
table.music-playlist tr td { table.music-playlist tr td {
border-left-style: none; border-left-style: none;
border-right-style: none; border-right-style: none;
border-bottom-color: darkgray;
} }
table.music-playlist .active { table.music-playlist tr {
cursor: pointer;
}
table.music-playlist tr.active {
background-color: gray; background-color: gray;
color: white; color: white;
} }

36
tutorials/MusicPlayer.html
View File

@ -1,18 +1,12 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<body>
<div>
<h1>Creating a Music Player</h1> <h1>Creating a Music Player</h1>
<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> <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>
<div> <div class="part">
<h2>Instantiating a Music Player</h2> <h2>Instantiating a Music Player</h2>
<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> <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"> <pre><code class="language-js">
@ -26,8 +20,8 @@
<div id="playlist-display"> <div id="playlist-display">
</div> </div>
</div> </div>
</div> </div>
<div> <div class="part">
<h2>Display a Play Button</h2> <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> <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"> <pre><code class="language-js">
@ -41,9 +35,8 @@
<div id="musicplayer-playbtn-demo"> <div id="musicplayer-playbtn-demo">
</div> </div>
</div> </div>
</div>
</div> <div class="part">
<div>
<h2>Similarly, Next and Previous Buttons</h2> <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> <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"> <pre><code class="language-js">
@ -64,8 +57,8 @@
<div id="musicplayer-prevbtn-demo"> <div id="musicplayer-prevbtn-demo">
</div> </div>
</div> </div>
</div> </div>
<script> <script>
const ask = window.audioshowkit; const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music"); const playlist = new ask.player.MusicPlaylist("Awesome Music");
@ -84,7 +77,4 @@
const prevElem = player.generatePreviousElement(); const prevElem = player.generatePreviousElement();
document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem); document.getElementById("musicplayer-prevbtn-demo").appendChild(prevElem);
</script> </script>
</body>
</html>

36
tutorials/MusicPlaylist.html
View File

@ -1,20 +1,14 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<body>
<div>
<h1>Creating a Music Playlist</h1> <h1>Creating a Music Playlist</h1>
<p> <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. 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> </p>
</div> </div>
<div> <div class="part">
<h2>Instantiation</h2> <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> <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"> <pre><code class="language-js">
@ -24,8 +18,8 @@
// The only parameter is the name of the playlist. // The only parameter is the name of the playlist.
const playlist = new ask.player.MusicPlaylist("Awesome Music"); const playlist = new ask.player.MusicPlaylist("Awesome Music");
</code></pre> </code></pre>
</div> </div>
<div> <div class="part">
<h2>Adding Music</h2> <h2>Adding Music</h2>
<p>A music playlist is no good if it doesn't have music. Lets add some.</p> <p>A music playlist is no good if it doesn't have music. Lets add some.</p>
<pre><code class="language-js"> <pre><code class="language-js">
@ -43,8 +37,8 @@
const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven"); const pathetiqueMusic = new ask.player.Music("/assets/audio/pathetique.mp3", "Sonata No. 8", "Beethoven");
playlist.addExisting(pathetiqueMusic); // Wow, a special function! playlist.addExisting(pathetiqueMusic); // Wow, a special function!
</code></pre> </code></pre>
</div> </div>
<div> <div class="part">
<h2>Display</h2> <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> <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"> <pre><code class="language-js">
@ -56,12 +50,12 @@
document.getElementById("musicplaylist-demo").appendChild(playlistElem); document.getElementById("musicplaylist-demo").appendChild(playlistElem);
</code></pre> </code></pre>
<div class="result"> <div class="result">
<h3>Result</h3>
<div id="musicplaylist-demo"> <div id="musicplaylist-demo">
</div> </div>
</div> </div>
</div>
<script> <script>
const ask = window.audioshowkit; const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music"); const playlist = new ask.player.MusicPlaylist("Awesome Music");
@ -73,8 +67,4 @@
const playlistElem = playlist.generatePlaylistElement(); const playlistElem = playlist.generatePlaylistElement();
document.getElementById("musicplaylist-demo").appendChild(playlistElem); document.getElementById("musicplaylist-demo").appendChild(playlistElem);
</script> </script>
</div>
</body>
</html>

39
tutorials/VisMusicPlayer.html
View File

@ -1,14 +1,8 @@
<!DOCTYPE html> <link rel="stylesheet" href="./assets/css/main.css" />
<html lang="en"> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
<head> <div class="part">
<link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head>
<body>
<section>
<h1>Visualizing Music</h1> <h1>Visualizing Music</h1>
<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> <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: This library comes with a variety of mapping tools:
@ -17,8 +11,8 @@
<li>Check out {@link module:patterns/canvas} for built in canvas patterns.</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:mappings/text} module!</li> <li>We even do font size and color with the {@link module:mappings/text} module!</li>
</ul> </ul>
</section> </div>
<section> <div class="part">
<h2>Instantiation</h2> <h2>Instantiation</h2>
<p>Exactly like when instantiating a normal music player, you will need a playlist. Other than that, it's simple.</p> <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"> <pre><code class="language-js">
@ -26,18 +20,16 @@
const playlist = previousPlaylist; // We are assuming you have a playlist ready. 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. const player = new ask.player.VisualizedMusicPlayer(playlist) // Creates a new music player with the playlist.
</code></pre> </code></pre>
</section> </div>
<section> <div class="part">
<div>
<h2>Playback</h2> <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> <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 class="result"> <div class="result">
<div id="playback-ctrls"> <div id="playback-ctrls">
</div> </div>
</div> </div>
</div> </div>
</section> <div class="part">
<section>
<h2>Visualization</h2> <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! Remember to hit the play button above to see the mappings in effect!</p> <p>The actual visualization can be performed in a variety of ways. We can use canvases, or even better, actual HTML elements! Remember to hit the play button above to see the mappings in effect!</p>
<div class="part"> <div class="part">
@ -84,7 +76,7 @@
<div class="part"> <div class="part">
<h3>Mapping Multiple Style Properties</h3> <h3>Mapping Multiple Style Properties</h3>
<p>What's that? you want multiple mappings on one? Here it is!</p> <p>What's that? you want multiple mappings on one? Here it is!</p>
<div class="result" style="height: 10rem; min-width: 10rem;"> <div class="result" style="height: 10rem;">
<div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div> <div id="square-map-demo" style="width: 2rem; height: 2rem; background-color: black;"></div>
</div> </div>
<pre><code class="language-js"> <pre><code class="language-js">
@ -103,9 +95,9 @@
ask.mappings.dimensions.mapHeight(squareElemConf); ask.mappings.dimensions.mapHeight(squareElemConf);
</code></pre> </code></pre>
</div> </div>
</section> </div>
<script> <script>
const ask = window.audioshowkit; const ask = window.audioshowkit;
const playlist = new ask.player.MusicPlaylist("Awesome Music"); const playlist = new ask.player.MusicPlaylist("Awesome Music");
@ -159,7 +151,4 @@
ask.mappings.dimensions.mapWidth(squareElemConf); ask.mappings.dimensions.mapWidth(squareElemConf);
ask.mappings.dimensions.mapHeight(squareElemConf); ask.mappings.dimensions.mapHeight(squareElemConf);
</script> </script>
</body>
</html>

3
tutorials/assets/css/main.css
View File

@ -12,5 +12,6 @@
} }
.part { .part {
margin-bottom: 2.5em; margin-bottom: 3rem;
} }