SoundComponent is a web component based on LitElement that provides a simple interface for playing audio files in a web application.
To install SoundComponent in your project, use npm:
install @ibrahimjs/sound-component;After installing the package, you can use SoundComponent in your project as follows:
First, make sure to import and define the component:
{ SoundComponent } from '@ibrahimjs/sound-component';
window.customElements.define('sound-component', SoundComponent);Then, you can use the component in your HTML:
<sound-component src="path/to/your/audio/file.mp3"></sound-component>To play the audio, you can call the play method of the component:
const soundComponent = document.querySelector("sound-component");
soundComponent.play();Here is a complete example of how to use SoundComponent:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SoundComponent Example</title>
<script type="module">
import { SoundComponent } from "@tuusuario/sound-component";
window.customElements.define("sound-component", SoundComponent);
window.addEventListener("DOMContentLoaded", () => {
const playButton = document.getElementById("play-button");
const soundComponent = document.querySelector("sound-component");
playButton.addEventListener("click", () => {
soundComponent.play();
});
});
</script>
</head>
<body>
<h1>SoundComponent Example</h1>
<sound-component src="path/to/your/audio/file.mp3"></sound-component>
<button id="play-button">Play Sound</button>
</body>
</html>- Type: String
- Description: The URL of the audio file to be played.
- htmlCopy code
Plays the audio file.
- javascriptCopy codeconst soundComponent = document.querySelector('sound-component');soundComponent.play();
SoundComponent is licensed under the MIT License.