diff --git a/README.md b/README.md index 5b698a0..4fb867b 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,10 @@ The [media-source-buffer](https://github.com/mdn/webaudio-examples/tree/main/med The [multi-track](https://github.com/mdn/webaudio-examples/tree/main/multi-track) directory contains an example of connecting separate independently-playable audio tracks to a single [`AudioDestinationNode`](https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode) interface. [Run the example live](http://mdn.github.io/webaudio-examples/multi-track/). +### Multi track advanced + +The [multi-track-advanced](https://github.com/mdn/webaudio-examples/tree/main/multi-track-advanced) directory contains an enhanced version of the original multi-track example. This version introduces a [`GainNode`](https://developer.mozilla.org/en-US/docs/Web/API/GainNode) for each track, providing precise control over individual audio levels through volume faders. It also includes solo buttons, enabling the isolation of a specific track by muting all other tracks. [Run the example live](http://mdn.github.io/webaudio-examples/multi-track-advanced/). + ### Offline audio context The [offline-audio-context](https://github.com/mdn/webaudio-examples/tree/main/offline-audio-context) directory contains a simple example to show how a Web Audio API [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) interface can be used to rapidly process/render audio in the background to create a buffer, which can then be used in any way you please. For more information, see [https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext). [Run example live](http://mdn.github.io/webaudio-examples/offline-audio-context/). diff --git a/multi-track-advanced/bassguitar.mp3 b/multi-track-advanced/bassguitar.mp3 new file mode 100644 index 0000000..64566fb Binary files /dev/null and b/multi-track-advanced/bassguitar.mp3 differ diff --git a/multi-track-advanced/clav.mp3 b/multi-track-advanced/clav.mp3 new file mode 100644 index 0000000..70fffd0 Binary files /dev/null and b/multi-track-advanced/clav.mp3 differ diff --git a/multi-track-advanced/drums.mp3 b/multi-track-advanced/drums.mp3 new file mode 100644 index 0000000..3e098ec Binary files /dev/null and b/multi-track-advanced/drums.mp3 differ diff --git a/multi-track-advanced/horns.mp3 b/multi-track-advanced/horns.mp3 new file mode 100644 index 0000000..ddca909 Binary files /dev/null and b/multi-track-advanced/horns.mp3 differ diff --git a/multi-track-advanced/index.html b/multi-track-advanced/index.html new file mode 100644 index 0000000..7b505de --- /dev/null +++ b/multi-track-advanced/index.html @@ -0,0 +1,271 @@ + + + + + Web Audio API Mixer - Advanced + + + + + + + + +
+
+ +

+ All tracks sourced from jplayer.org +

+
+
+ + + + diff --git a/multi-track-advanced/leadguitar.mp3 b/multi-track-advanced/leadguitar.mp3 new file mode 100644 index 0000000..dea0964 Binary files /dev/null and b/multi-track-advanced/leadguitar.mp3 differ diff --git a/multi-track-advanced/style.css b/multi-track-advanced/style.css new file mode 100644 index 0000000..331082b --- /dev/null +++ b/multi-track-advanced/style.css @@ -0,0 +1,128 @@ +body { + background-color: #121212; + color: white; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +a { + color: #8cb4ff; +} + +.top-left-button { + position: absolute; + top: 20px; + left: 20px; + background-color: #4caf50; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.top-left-button:hover { + background-color: #45a049; +} + +.wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 20px; + box-sizing: border-box; +} + +#tracks { + display: flex; + flex-direction: row; + gap: 20px; +} + +ul { + display: flex; + gap: 20px; + padding: 0; + margin: 0; + list-style: none; +} + +li { + background-color: #1e1e1e; + padding: 20px; + padding-top: 30px; + border-radius: 8px; + width: 150px; + height: 370px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.track { + font-weight: bold; + font-size: 18px; + text-align: center; +} + +.playbutton { + background-color: #ff5050; + border: none; + padding: 8px 12px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + display: none; +} + +.playbutton:hover, +.playbutton.playing { + background-color: #45a049; +} + +.solobutton { + background-color: gray; + border: none; + padding: 8px 12px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + display: none; +} + +.solobutton.active { + background-color: yellow; +} + +.fader { + -webkit-appearance: slider-vertical; + width: 30px; + height: 220px; + margin-top: 10px; + cursor: pointer; +} + +.fader.disabled { + background-color: #555; + pointer-events: none; +} + +.loading-text { + font-size: 14px; + color: #bbb; +} + +.sourced { + position: absolute; + bottom: 20px; + right: 20px; + font-size: 14px; + color: #bbb; +} + +button:focus { + outline: 2px solid #2196f3; +}