- Documentation: oe-web-components.netlify.app
- NPM: npmjs.com/package/@ecoacoustics/web-components
- CDN: jsdelivr.com/package/npm/@ecoacoustics/web-components
- GitHub Releases: github.com/ecoacoustics/web-components/releases
You can import all the web components through the CDN
Script tag snippet:
<script type="module" src="https://cdn.jsdelivr.net/npm/@ecoacoustics/web-components/dist/components.js"></script>Full page example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Component CDN Example</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ecoacoustics/web-components/dist/components.js"></script>
</head>
<body>
<oe-axes>
<oe-indicator>
<oe-spectrogram
id="playing-spectrogram"
class="large"
src="/example.flac"
window-size="1024"
color-map="audacity"
scaling="stretch"
></oe-spectrogram>
</oe-indicator>
</oe-axes>
<oe-media-controls for="playing-spectrogram"></oe-media-controls>
</body>
</html>You can add the example components used in this repository by using the following command
$ npm i @ecoacoustics/web-components
>You can then import them into a file using
import * from "@ecoacoustics/web-components";- Install a recent stable version of Node JS
- Install pnpm:
corepack enable pnpm, followed bycorepack use pnpm@latest - The install dependencies:
pnpm install(this should have happened with the last step)
Then you can run the following commands:
-
pnpm devto start a development server -
pnpm buildto build the components -
pnpm testto run the tests
You can manually import the example components in this repository using the GitHub releases page
Download the component.js file to use all web components or import a subset of components through the components.zip zip archive.
| Chrome | Firefox | Safari | |
|---|---|---|---|
| Windows | ✅ | ✅ | ❌ |
| MacOS | ✅ | ✅ | ✅ |
| Linux | ✅ | ✅ | ❌ |