Ambient Sounds Web Components

Example <coffee-shop-ambience> component:

See full demo.

Components

Fire

<fire-ambience>
</fire-ambience>

Thunderstorm

<thunderstorm-ambience>
</thunderstorm-ambience>

Heavy rain

<heavy-rain-ambience>
</heavy-rain-ambience>

Rain on window

<rain-on-window>
</rain-on-window>

Waves

<waves-ambience>
</waves-ambience>

Wind

<wind-ambience>
</wind-ambience>

Coffee shop

<coffee-shop-ambience>
</coffee-shop-ambience>

Birds

<birds-ambience>
</birds-ambience>

Cat purr

<cat-purr>
</cat-purr>

Books

<books-ambience>
</books-ambience>

Walking on forest road

<walking-on-forest-road>
</walking-on-forest-road>

Typing

<typing-ambience>
</typing-ambience>

Crickets at night

<crickets-at-night>
</crickets-at-night>

Eerie forest

<eerie-forest-ambience>
</eerie-forest-ambience>

Usage

The components import and extend the PlayBox class, so make sure you have play-box.js.

Add the component you'd like to use, for example:

<script type="module" src="heavy-rain.js" defer></script>

Make sure you have the assets (audio and image sources) for the components. (for example, assets/heavy-rain).

Then use it in your HTML:

<heavy-rain-ambience></heavy-rain-ambience>

Attributes

The PlayBox element has the following attributes:

• overlayColor
  • Border and button background color.
  • Default: #000.
• iconColor
  • Play/pause SVGs' stroke color.
  • Default: #fff.
• buttonPosition
  • One of "top", "top-left", "top-right", "center", "bottom", "bottom-left", "bottom-right".
  • Default: "center".
• boxBorderRadius
  • One of "none", "full", "x-small", "small", "medium", "large", "x-large".
  • Default: "full".
• buttonBorderRadius
  • One of "none", "full", "x-small", "small", "medium", "large", "x-large".
  • Default: "full".

Make your own

You can create your own custom element by extending the PlayBox class.

Define the path or URL to audio and image sources:

const AUDIO_SRC = '/path/to/audio/file';
const IMAGE_SRC = '/path/to/image/file';

Create your custom element class, and set the audio and image:

class MyCustomElement extends PlayBox {
  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();

    this._audioEl.src = AUDIO_SRC;
    this._boxDiv.style.backgroundImage = `url("${IMAGE_SRC}")`;
  }
}

Register it:

if (!customElements.get('my-custom-element')) {
  customElements.define('my-custom-element', MyCustomElement);
}

Here it is in full:

const AUDIO_SRC = '/path/to/audio/file';
const IMAGE_SRC = '/path/to/image/file';

class MyCustomElement extends PlayBox {
  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();

    this._audioEl.src = AUDIO_SRC;
    this._boxDiv.style.backgroundImage = `url("${IMAGE_SRC}")`;
  }
}

if (!customElements.get('my-custom-element')) {
  customElements.define('my-custom-element', MyCustomElement);
}

Credits

• Fire
  • Sound: Fireplace by inchadney | License: Creative Commons 0
  • Image: Photo by Riley sporle on Unsplash
• Thunderstorm
  • Sound: Heavy Thunder Strike by BlueDelta | License: Creative Commons 0
  • Image: Photo by Milen Kolev on Unsplash
• Heavy rain
  • Sound: Heavy Rain by lebaston100 | License: Attribution 4.0
  • Image: Photo by Animesh Srivastava from Pexels
• Rain on window
  • Sound: Rain on Windows, Interior, A by InspectorJ | License: Attribution 4.0
  • Image: Photo by Anant Jain on Unsplash
• Waves
  • Sound: North Sea by Soarer | License: Attribution 4.0
  • Image: Photo by White Malaki on Unsplash
• Wind
  • Sound: Strong wind by guillermochicasonido | License: Attribution 4.0
  • Image: Photo by Alexandre Moreira from Pexels
• Coffee shop
  • Sound: coffee shop ambience by waweee | License: Creative Commons 0
  • Image: Photo by andrew welch on Unsplash
• Birds
  • Sound: Morning in the country by inchadney | License: Attribution 4.0
  • Image: Photo by valentin hintikka on Unsplash
• Cat purr
  • Sound: purring happy cat by Minscer | License: Creative Commons 0
  • Image: Photo by Can Ceylan from Pexels
• Books
  • Sound: Very Old Book Page Turns;cracking by Australopithecusman | License: Attribution 4.0
  • Image: Photo by Mihai Lazăr on Unsplash
• Walking on forest road gravel & grass
  • Sound: Going on a forest road gravel and grass.wav by straget | License: Creative Commons 0
  • Image: Photo by Nereid Ndreu on Unsplash
• Typing
  • Sound: Mechanical Keyboard Typing by GeorgeHopkins | License: Attribution 4.0
  • Image: Photo by Andrew M on Unsplash
• Crickets at night
  • Sound: Ambience Night Field Cricket 01 by sengjinn | License: Creative Commons 0
  • Image: Photo by Leonid Filinov on Unsplash
• Eerie forest
  • Sound: eerie_forest by gregswinford | License: Attribution 4.0
    Tawny Owls .wav by Benboncan | License: Attribution 4.0
    Owls.wav by Benboncan | License: Attribution 4.0
    Crows_01.wav by Q.K. | License: Creative Commons 0
    creeeeek-GAIN_01.wav by XxBirdoxX | License: Creative Commons 0
    20071104.forest.04.binaural.mp3 by dobroide | License: Attribution 4.0
    20060706.night.forest02.flac by dobroide | License: Attribution 4.0
    20060706.night.cricket.flac by dobroide | License: Attribution 4.0
  • Image: Photo by Irene Gambarara on Unsplash

License

MIT