Реализация живого гитарного тюнера на JavaScript с onlinetuner.co

Гитарный тюнер может определять частоту звука. Частота волны — это количество пиков волны, которые проходят фиксированную точку за заданный промежуток времени, эта частота измеряется в герцах (Гц), что соответствует количеству гребней, проходящих за одну секунду. Благодаря API Web Audio существует несколько способов «получить частоту» звука, который исходит от микрофона. С этой информацией может быть создан гитарный тюнер.

В этой статье вы узнаете, как отобразить очень простой, но полезный фрагмент гитарного тюнера в HTML5.

1. Включите скрипт гитарного тюнера

Вы можете скачать минимизированный или весь исходный код guitar-tuner.js из репозитория на Github или вы можете просто использовать бесплатный CDN:

После установки вы сможете получить доступ к тюнеру в окне с объектом OnlineTuner. Настройка выполняется с помощью API-интерфейса Web Audio для управления частотами и т. Д. И Media API для извлечения звука с микрофона. Для получения дополнительной информации об этой классной библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.

2. Инициализируйте единственный экземпляр тюнера

Инициализация тюнера, довольно проста. Библиотека манипулирует и отображает информацию на холсте, поэтому первое, что вам нужно сделать, — это создать элемент холста, который будет использоваться во время инициализации. Вы можете настроить до 4 цветовых свойств диаграммы, которая будет отображаться на холсте, цвет, когда заметка полностью настроена (обычно зеленый), и цвет, который предупреждает, что строка еще не была настроена. Вы можете инициализировать один экземпляр тюнера, используя следующий код:

var Settings = {
container: document.getElementById("guitar-tuner"),
backgroundColor: "white", // or hex colors "#ffffff"
notOkayColor: "orange",
okayColor: "green",
fontColor: "black"
};
function initializeTuner() {
// Create a single or multiple instance of tuners at time
var tuners = [
new OnlineTuner.Controller.GuitareTuner(
new OnlineTuner.Widget.CircleWidget(
Settings.container,
Settings.backgroundColor,
Settings.notOkayColor,
Settings.okayColor,
Settings.fontColor
)
)
];
// Initialize the tuner with the callbacks
new OnlineTuner.Analyser(tuners).install(function() {
console.log("Succesfully initialized");
}, function(errorMessage) {
console.error("Oops, this shouldn't happen", errorMessage);
});
}
// Render the guitar tuner on the canvas by running the function
initializeTuner();

Запустив сниппет в браузере, вы получите простую диаграмму, которая меняется каждый раз, когда вы играете на струне рядом с микрофоном (см. Изображение статьи).

3. Несколько экземпляров тюнера

Если вы хотите отобразить несколько диаграмм тюнера, которые работают одинаково, просто вставьте другой виджет круга в код инициализации и добавьте еще один холст:

var Settings = {
container: document.getElementById("guitar-tuner"),
backgroundColor: "white", // or hex colors "#ffffff"
notOkayColor: "orange",
okayColor: "green",
fontColor: "black"
};
var SettingsSecondTuner = {
container: document.getElementById("guitar-tuner"),
backgroundColor: "white", // or hex colors "#ffffff"
notOkayColor: "red",
okayColor: "#69934d",
fontColor: "black"
};
function initializeTuners() {
// Create a single or multiple instance of tuners at time
var tuners = [
// First tuner
new OnlineTuner.Controller.GuitareTuner(
new OnlineTuner.Widget.CircleWidget(
Settings.container,
Settings.backgroundColor,
Settings.notOkayColor,
Settings.okayColor,
Settings.fontColor
)
),
// Second Tuner
new OnlineTuner.Controller.GuitareTuner(
new OnlineTuner.Widget.CircleWidget(
SettingsSecondTuner.container,
SettingsSecondTuner.backgroundColor,
SettingsSecondTuner.notOkayColor,
SettingsSecondTuner.okayColor,
SettingsSecondTuner.fontColor
)
)
];
// Initialize the tuner with the callbacks
new OnlineTuner.Analyser(tuners).install(function() {
console.log("Succesfully initialized");
}, function(errorMessage) {
console.error("Oops, this shouldn't happen", errorMessage);
});
}
// Render the guitar tuner on the canvas by running the function
initializeTuners();

Живой пример

Возьмите свою гитару и сыграйте несколько аккордов (или отдельных струн), используя следующую живую демонстрацию гитарного тюнера:

Заметка

В некоторых браузерах демо не будет работать на этом сайте из-за iframe, поэтому откройте его в новом окне, чтобы протестировать его.

Выводы

Хотя есть и другие замечательные реализации, которые работают так же хорошо, как и этот плагин, например демонстрация Guitar Tune от команды Google Chrome:

Этот плагин является одним из самых простых для реализации, как вы можете видеть.