Skip to content

Commit

Permalink
Improve WCAG compliance
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattfsourcecode
mattfsourcecode committed Oct 13, 2024
1 parent d2752b7 commit f5f2fae
Showing 1 changed file with 91 additions and 42 deletions.
133 changes: 91 additions & 42 deletions multi-track-advanced/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,96 +18,134 @@
So provide a simple button to get things started.
-->
<button id="startbutton" class="top-left-button">
<button
id="startbutton"
class="top-left-button"
aria-label="Start loading tracks">
Press to load tracks
</button>

<div class="wrapper">
<section id="tracks">
<ul>
<li data-loading="true">
<a href="leadguitar.mp3" class="track">Lead Guitar</a>
<section id="tracks" role="region" aria-labelledby="tracks-title">
<ul role="list">
<li data-loading="true" role="listitem">
<a href="leadguitar.mp3" class="track" tabindex="0">Lead Guitar</a>
<input
type="range"
class="fader"
min="0"
max="1"
step="0.01"
value="0.8" />
<p class="loading-text">Loading...</p>
<button class="playbutton" aria-describedby="guitar-play-label">
value="0.8"
aria-label="Volume control for Lead Guitar" />
<p class="loading-text" aria-live="polite">Loading...</p>
<button
class="playbutton"
aria-describedby="guitar-play-label"
aria-pressed="false">
<span id="guitar-play-label">Play</span>
</button>
<button class="solobutton" aria-describedby="guitar-solo-label">
<span>Solo</span>
<button
class="solobutton"
aria-describedby="guitar-solo-label"
aria-pressed="false">
<span id="guitar-solo-label">Solo</span>
</button>
</li>
<li data-loading="true">
<a href="bassguitar.mp3" class="track">Bass Guitar</a>
<li data-loading="true" role="listitem">
<a href="bassguitar.mp3" class="track" tabindex="0">Bass Guitar</a>
<input
type="range"
class="fader"
min="0"
max="1"
step="0.01"
value="0.8" />
<p class="loading-text">Loading...</p>
<button class="playbutton" aria-describedby="bass-play-label">
value="0.8"
aria-label="Volume control for Bass Guitar" />
<p class="loading-text" aria-live="polite">Loading...</p>
<button
class="playbutton"
aria-describedby="bass-play-label"
aria-pressed="false">
<span id="bass-play-label">Play</span>
</button>
<button class="solobutton" aria-describedby="bass-solo-label">
<span>Solo</span>
<button
class="solobutton"
aria-describedby="bass-solo-label"
aria-pressed="false">
<span id="bass-solo-label">Solo</span>
</button>
</li>
<li data-loading="true">
<a href="drums.mp3" class="track">Drums</a>
<li data-loading="true" role="listitem">
<a href="drums.mp3" class="track" tabindex="0">Drums</a>
<input
type="range"
class="fader"
min="0"
max="1"
step="0.01"
value="0.8" />
<p class="loading-text">Loading...</p>
<button class="playbutton" aria-describedby="drums-play-label">
value="0.8"
aria-label="Volume control for Drums" />
<p class="loading-text" aria-live="polite">Loading...</p>
<button
class="playbutton"
aria-describedby="drums-play-label"
aria-pressed="false">
<span id="drums-play-label">Play</span>
</button>
<button class="solobutton" aria-describedby="drums-solo-label">
<span>Solo</span>
<button
class="solobutton"
aria-describedby="drums-solo-label"
aria-pressed="false">
<span id="drums-solo-label">Solo</span>
</button>
</li>
<li data-loading="true">
<a href="horns.mp3" class="track">Horns</a>
<li data-loading="true" role="listitem">
<a href="horns.mp3" class="track" tabindex="0">Horns</a>
<input
type="range"
class="fader"
min="0"
max="1"
step="0.01"
value="0.8" />
<p class="loading-text">Loading...</p>
<button class="playbutton" aria-describedby="horns-play-label">
value="0.8"
aria-label="Volume control for Horns" />
<p class="loading-text" aria-live="polite">Loading...</p>
<button
class="playbutton"
aria-describedby="horns-play-label"
aria-pressed="false">
<span id="horns-play-label">Play</span>
</button>
<button class="solobutton" aria-describedby="horns-solo-label">
<span>Solo</span>
<button
class="solobutton"
aria-describedby="horns-solo-label"
aria-pressed="false">
<span id="horns-solo-label">Solo</span>
</button>
</li>
<li data-loading="true">
<a href="clav.mp3" class="track">Clavi</a>
<li data-loading="true" role="listitem">
<a href="clav.mp3" class="track" tabindex="0">Clavi</a>
<input
type="range"
class="fader"
min="0"
max="1"
step="0.01"
value="0.8" />
<p class="loading-text">Loading...</p>
<button class="playbutton" aria-describedby="clavi-play-label">
value="0.8"
aria-label="Volume control for Clavi" />
<p class="loading-text" aria-live="polite">Loading...</p>
<button
class="playbutton"
aria-describedby="clavi-play-label"
aria-pressed="false">
<span id="clavi-play-label">Play</span>
</button>
<button class="solobutton" aria-describedby="clavi-solo-label">
<span>Solo</span>
<button
class="solobutton"
aria-describedby="clavi-solo-label"
aria-pressed="false">
<span id="clavi-solo-label">Solo</span>
</button>
</li>
</ul>
Expand All @@ -117,7 +155,7 @@
</section>
</div>

<script type="text/javascript">
<script>
let audioCtx = null;
let soloedButton = null;

Expand Down Expand Up @@ -147,16 +185,25 @@
source.connect(gainNode);
source.start();
playButton.classList.add("playing");
source.onended = () => playButton.classList.remove("playing");
playButton.setAttribute("aria-pressed", "true");
source.onended = () => {
playButton.classList.remove("playing");
playButton.setAttribute("aria-pressed", "false");
};
}

function toggleSolo(button) {
if (soloedButton === button) {
button.classList.remove("active");
button.setAttribute("aria-pressed", "false");
soloedButton = null;
} else {
if (soloedButton) soloedButton.classList.remove("active");
if (soloedButton) {
soloedButton.classList.remove("active");
soloedButton.setAttribute("aria-pressed", "false");
}
button.classList.add("active");
button.setAttribute("aria-pressed", "true");
soloedButton = button;
}
updateFadersAndMute();
Expand Down Expand Up @@ -209,7 +256,9 @@
soloButton.style.display = "inline-block";

playButton.addEventListener("click", () => {
if (audioCtx.state === "suspended") audioCtx.resume();
if (audioCtx.state === "suspended") {
audioCtx.resume();
}
playTrack(track, gainNode, playButton);
});

Expand Down

0 comments on commit f5f2fae

Please sign in to comment.