x
1
<a target="_blank" class="text-link" href="https://csszero.lazaronixon.com/sounds">Click here to go to the example</a>1
<%= link_to "Click here to go to the example", main_app.sounds_url, target: "_blank", class: "text-link" %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { Controller } from "@hotwired/stimulus"import { play } from "https://esm.sh/cuelume@0.2.2?standalone"export default class extends Controller { static values = { connect: String, disconnect: String, volume: { type: Number, default: 1 } } connect() { this.hasConnectValue && this.#play(this.connectValue) } disconnect() { this.hasDisconnectValue && this.#play(this.disconnectValue) } chime() { this.#play("chime") } sparkle() { this.#play("sparkle") } droplet() { this.#play("droplet") } bloom() { this.#play("bloom") } whisper() { this.#play("whisper") } tick() { this.#play("tick") } press() { this.#play("press") } release() { this.#play("release") } toggle() { this.#play("toggle") } success() { this.#play("success") } error() { this.#play("error") } page() { this.#play("page") } loading() { this.#play("loading") } ready() { this.#play("ready") } #play(sound) { play(sound, { volume: this.volumeValue }) }}