https://github.com/paulkinlan/air-horner
A simple air horn custom element
https://github.com/paulkinlan/air-horner
air-horner horn web-component webaudio
Last synced: about 1 month ago
JSON representation
A simple air horn custom element
- Host: GitHub
- URL: https://github.com/paulkinlan/air-horner
- Owner: PaulKinlan
- License: apache-2.0
- Created: 2017-01-24T19:40:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-08T22:53:52.000Z (about 8 years ago)
- Last Synced: 2025-04-15T19:17:39.715Z (about 1 month ago)
- Topics: air-horner, horn, web-component, webaudio
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/PaulKinlan/air-horner
- Size: 268 KB
- Stars: 18
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Air Horner
Air horn to your hearts content.
[](https://www.webcomponents.org/element/owner/my-element)
```html
```
## FAQ
### How do I include this?
There are two ways.
1. ``
2. `` — my preferred method.
The element name is already defined in the script as ``.
### How can I change the height and width?
The :host is an `inline-block` element that has a default dimensions of 100px x
100px. You can override this by specifiying your own width and height.
```html
air-horner {
width: 300px;
height: 300px;
}
```
### Can I horn without the user interaction?
Yes. The element exposes a couple of properties and methods that you can use to
interact with the `` element.
#### Methods
* element.`start()`
* element.`stop()`
#### Attributes
All attributes are managed as DOM Attributes, updating the value on the object
will update it on the element and likewise from the DOM Element to the object.
* `src` — A reference to the media element that will be played.
* `loopStart` — The start point for the looping in SS.MMMM format
* `loopEnd` — The end point for the looping in SS.MMMM format
### Is it possible to style the airhorn?
Yes and no. There are no styling extension for the default airhorn elements
in the ShadowDOM. You do have the ability to provide your own element using
`` projection.
When the element is in `horning` state, a class name of `horning` will be
applied to the root of the element.
```html
.head .face, .head .mouth {
position:absolute;
}
.head {
position: relative;
}
@keyframes jaking {
0% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, 12px);
}
}
#jakehorner.horning .mouth {
animation-name: jaking;
-webkit-animation-name: jaking;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
animation-duration: 10ms;
animation-delay: 200ms;
transform: translate(0, 10px) .2s cubic-bezier(.4, 0, 1, 1);
}
```
### Is it possible to change the horn sound?
Yes. You can change the src attribute on the element. Note, if you want the
audio to loop you need to define a `loopStart` and `loopEnd` attribute. Finding
a good loop point is left to the reader ;)
```html
```
By default the `airhorn.mp3` is used.
### Can you change the loop point?
Yes. By setting the `loopStart` and `loopEnd` attributes you can control where
the looping occurs. Be careful though, you need to be careful of audio clipping.
### Can it do anything else?
Not yet.