svjs-audio
Version:
Simple ES6 Module around the Web Audio API. For playing audio samples in a web page.
80 lines (74 loc) • 2.32 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svjs-audio</title>
<link rel="stylesheet" href="./assets/style/screen.css">
</head>
<body>
<h1>svjs-audio Demo Page</h1>
<h2>Sample</h2>
<p>
<button id="play-sample">Play a Sample</button>
</p>
<pre class="code">
const bassDrop = new Sample("./assets/sound/bass_drop.mp3")
document.getElementById("play-sample").addEventListener("mousedown", () => {
bassDrop.play()
})
</pre>
<h2>AudioSprite</h2>
<p>
Play parts of an AudioSprite<br/>
<button id="play-blip">Blip</button>
<button id="play-plong">Plong</button>
<button id="play-whoop">Whoop</button>
</p>
<pre class="code">
const audioSprite = new AudioSprite("./assets/sound/test_sprite.mp3",
{
gain: 0.8,
slices: {
"blip": {offset: 0, duration: 0.45},
"plong": {offset: 0.45, duration: 0.45},
"whoop": {offset: 0.9, duration: 0.45}
}
})
document.getElementById("play-blip").addEventListener("mousedown", () => {
audioSprite.play("blip")
})
document.getElementById("play-plong").addEventListener("mousedown", () => {
audioSprite.play("plong")
})
document.getElementById("play-whoop").addEventListener("mousedown", () => {
audioSprite.play("whoop")
})
</pre>
<script type="module">
import {Sample} from "./src/svjs-audio/Sample.js"
import {AudioSprite} from "./src/svjs-audio/AudioSprite.js"
const bassDrop = new Sample("./assets/sound/bass_drop.mp3")
document.getElementById("play-sample").addEventListener("mousedown", () => {
bassDrop.play()
})
const audioSprite = new AudioSprite("./assets/sound/test_sprite.mp3",
{
gain: 0.8,
slices: {
"blip": {offset: 0, duration: 0.45},
"plong": {offset: 0.45, duration: 0.45},
"whoop": {offset: 0.9, duration: 0.45}
}
})
document.getElementById("play-blip").addEventListener("mousedown", () => {
audioSprite.play("blip")
})
document.getElementById("play-plong").addEventListener("mousedown", () => {
audioSprite.play("plong")
})
document.getElementById("play-whoop").addEventListener("mousedown", () => {
audioSprite.play("whoop")
})
</script>
</body>
</html>