https://github.com/kettek/css-audio
CSS add-on library for audio playback and control
https://github.com/kettek/css-audio
audio css css3 css3-selectors html html-css html5-audio javascript
Last synced: 10 months ago
JSON representation
CSS add-on library for audio playback and control
- Host: GitHub
- URL: https://github.com/kettek/css-audio
- Owner: kettek
- License: gpl-3.0
- Created: 2018-03-07T20:25:10.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T23:22:47.000Z (over 3 years ago)
- Last Synced: 2025-04-01T18:57:34.941Z (about 1 year ago)
- Topics: audio, css, css3, css3-selectors, html, html-css, html5-audio, javascript
- Language: JavaScript
- Size: 38.1 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# css-audio
**This software should be considered as both *alpha* and a curiosity.**
## What is css-audio?
**css-audio** is an add-on mechanism for adding audio playback and control to elements in Web documents.
Although the author has specific uses for it in internal software projects, it is largely a curiosity created because it could be created. Enhancements, rewrites, or reimaginings are encouraged.
## How does it work?
**css-audio** works by using CSS custom properties with JavaScript to manage changes in these properties.
A brief example, to add a sound to a button that triggers on click, would be:
button {
--audio-src: url('click.ogg');
}
button:active {
--audio-state: playing;
}
## Basic Usage
Add the following to your HTML ``:
> <script type='text/javascript' src='//kettek.net/s/css-audio/css-audio-LATEST.min.js'></script>
>
> <script type='text/javascript'>window.addEventListener('load', function() { KTK.CSSA.init(); })</script>
Thereafter you can add a stylesheet to the document head defining your *Audio Properties* and any accompanying HTML elements to the document body.
## Audio Properties
The custom CSS properties that **css-audio** provides are as follows.
### `--audio-src`
The `--audio-src` property sets one or more audio sources on an element.
#### Syntax
Each audio source is specified as a `url(...)` value.
To specify multiple audio sources, supply multiple values separated by a comma:
```
--audio-src:
url(audio1.ogg),
url(audio2.ogg);
```
#### Values
* ****
* The audio should loop the supplies amount of times. *Defaults to "1"*
### `--audio-ontrigger`
The `--audio-ontrigger` property sets how playback should behave when the audio source updates.
#### Syntax
Each audio source's trigger rule is specified as a String value.
To specify trigger rules for multiple audio sources, supply multiple values separated by a comma:
```
--audio-trigger:
reset,
multi;
```
#### Values
* **continue** *default*
* The audio should continue playing if the audio is still playing.
* **reset**
* The audio should immediately reset to the beginning of its offset and play.
* **multi**
* The audio should create a new audio playback source that copies its rules and begin playback.
### `--audio-offset`
The `--audio-offset` property sets the playback offset for the audio source to start from.
#### Syntax
Each audio source's offset rule is specified as a `
The specify offset rules for multiple audio sources, supply multiple values separated by a comma:
```
--audio-offset:
0.1s,
500ms;
```
#### Values
* **<time>**
* Is a [<time>](https://developer.mozilla.org/en-US/docs/Web/CSS/time) denoting the offset of the audio. There can be several of them, separated by commas. *Defaults to "0s"*
### `--audio-hold-navigation`
The `--audio-hold-navigation` property prevents the element from navigating the browser until any playing audio on the element has finished playback.
#### Syntax
```
--audio-hold-navigation: finished;
```
#### Values
* **finished**
* The element is prevented from navigating the page until the element's audio playback is complete.
## Advanced Usage
### Initialization Options
**css-audio** can be passed a configuration object through the `init()` call, thereby changing some of the core functionality of **css-audio** to fit your needs.
These options and their effects are:
| Option | Description | Value(s) | Default Value |
|-------------------|---------------|-----------|---------------|
| processDOM | Should the DOM should be processed on init? | true/false | true |
| observeDOM | Should the DOM be observed for added Elements? | true/false | true |
| observeNodeConfig | Options for MutationObserver.observe used on Nodes | See [MutationObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) | `{ attributeFilter: ['style', 'class', 'id'] }` |
| observeDOMConfig | Options for MutationObserver.observe used on the DOM | See [MutationObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) | { childList: true } |
| selectors | CSS selectors that should trigger handleAudioState for Nodes | Array of Strings | ['active', 'hover', 'focus', 'checked'] |
## Current Limitations
* There is no proper triggering of children when the parent changes.
---
* Internal parsing for Element watching validity requires overspecific rules that specify the full class name, id, and tag name. Additionally, complex psuedo-class selectors will also not register.
```
```
```
div.button#unique:active:hover {
/* NO MATCH */
}
div.button#unique:active {
/* MATCH */
}
div.button:active {
/* NO MATCH */
}
div:active {
/* NO MATCH */*
}
```