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/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/components.js"></script>
</head>
<body>
<oe-axes>
<oe-indicator>
<oe-spectrogram
id="playing-spectrogram"
class="large"
src="https://github.com/ecoacoustics/web-components/raw/main/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";corepack enable pnpm, followed by corepack use pnpm@latestpnpm install (this should have happened with the last step)Then you can run the following commands:
pnpm dev to start a development serverpnpm build to build the componentspnpm test to run the testsYou 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.