Чтобы интегрировать NPM-библиотеку `web-audio-beat-detector` в ваш проект, состоящий из HTML, CSS и JavaScript без использования фреймворков, вам необходимо следовать нескольким шагам. Поскольку библиотека не предоставляет готовую min.js версию на CDN, вам нужно будет установить ее локально, а затем использовать в вашем проекте. Вот пошаговая инструкция:
### Шаг 1: Установите Node.js
Если у вас еще нет установленного Node.js, вам потребуется его установить. Это необходимо для работы с NPM (Node Package Manager). Вы можете скачать Node.js с [официального сайта](https://nodejs.org/).
### Шаг 2: Создайте проект
1. Создайте папку для вашего проекта.
2. Откройте терминал (или командную строку) и перейдите в созданную папку.
3. Выполните команду для инициализации нового npm-проекта:
```bash
npm init -y
```
Это создаст файл `package.json` в вашем проекте.
### Шаг 3: Установите библиотеку
Выполните команду для установки библиотеки `web-audio-beat-detector`:
```bash
npm install web-audio-beat-detector
```
### Шаг 4: Создайте файл сборки
Чтобы использовать библиотеку в браузере, вам нужно собрать код, так как браузеры не могут непосредственно импортировать модули Node.js. Для этого вы можете воспользоваться сборщиком, таким как Browserify или Webpack. Мы рассмотрим пример с Browserify.
1. Установите Browserify:
```bash
npm install -g browserify
```
2. Создайте файл JavaScript (например, `main.js`) в корневой директории вашего проекта и импортируйте библиотеку:
```javascript
// main.js
const BeatDetector = require('web-audio-beat-detector');
// Пример использования библиотеки
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const beatDetector = new BeatDetector(audioContext);
// Здесь будет ваш код для работы с beatDetector
```
### Шаг 5: Соберите код
Используйте Browserify, чтобы собрать `main.js` в один файл, который можно подключить в HTML.
```bash
browserify main.js -o bundle.js
```
Это создаст файл `bundle.js`, который будет содержать весь необходимый код.
### Шаг 6: Подключите скрипт к HTML
Теперь вы можете подключить скомпилированный `bundle.js` к вашему HTML-документу.
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Beat Detector</title>
</head>
<body>
<h1>Beat Detector</h1>
<script src="bundle.js"></script>
</body>
</html>
```
### Шаг 7: Запустите ваш проект
Теперь ваш проект готов к запуску. Вы можете использовать сервер для разработки (например, Live Server в VSCode) или просто открыть HTML-файл в браузере.
### Шаг 8: Далее
Теперь вы можете продолжать добавлять функционал в ваш проект на основе beat detector. Не забудьте ознакомиться с документацией библиотеки `web-audio-beat-detector` для примеров и опций использования.
Теперь вы знаете, как интегрировать npm-библиотеку в проект без использования фреймворков!