使用onlinetuner.co在JavaScript中实现Live Guitar Tuner

本文概述

• 1.包括吉他调音器脚本
• 2.初始化调谐器的单个实例
• 3.多个调谐器实例
• 现场例子
• 结论

吉他调音器可以检测声音的频率。波的频率是在给定的时间内经过固定点的波峰的数量, 该频率以赫兹(Hz)为单位, 它对应于在一秒钟内通过的波峰数量。由于使用了Web Audio API, 因此可以使用多种方法来”获取声音的频率”, 该频率来自麦克风。利用此信息, 可以创建吉他调音器。

在本文中, 你将学习如何在HTML5中显示一个非常简单但有用的吉他调音器代码段。

1.包括吉他调音器脚本

你可以从Github的存储库中下载guitar-tuner.js的最小源代码或整个源代码, 也可以简单地使用免费的CDN：

<!-- from a free CDN -->
<script src="https://cdn.rawgit.com/citronneur/onlinetuner.co/master/js/onlinetuner.min.js"></script>

<!-- From a local copy -->
<script src="onlinetunner.min.js"></script>

安装后, 你将能够在窗口中使用OnlineTuner对象访问该调谐器。借助Web Audio API进行调整, 以操纵频率等, 并借助Media API从麦克风检索音频。有关此炫酷库的更多信息, 请访问Github上的官方存储库。

2.初始化调谐器的单个实例

调谐器的初始化非常简单。该库可在画布上操纵和呈现信息, 因此你需要做的第一件事是创建一个画布元素, 该元素将在初始化期间使用。你最多可以自定义将在画布上呈现的图表的4种颜色属性, 调音完全调好时的颜色(通常是绿色)以及警告尚未调弦的颜色。你可以使用以下代码初始化调谐器的单个实例：

<!-- Create a canvas where the tuner will be rendered -->
<canvas id="guitar-tuner" height="300"></canvas>

<script>
    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();
</script>

在浏览器中运行该代码段, 将生成一个简单的图表, 每次你在靠近麦克风的地方弹奏弦时该图表都会更改(请参见文章图片)。

3.多个调谐器实例

如果你愿意显示多个调谐器图表, 它们的工作方式相同, 则只需将另一个圆形窗口小部件推入初始化代码并添加另一个画布即可：

<!-- Create a canvas where the tuner will be rendered -->
<canvas id="guitar-tuner" height="300"></canvas>

<!-- Create a canvas where the second tuner will be rendered -->
<canvas id="second-guitar-tuner" height="300"></canvas>

<script>
    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();
</script>

现场例子

使用以下吉他调音器现场演示, 拿起吉他并弹奏一些和弦(或单弦)：

注意

在某些浏览器中, 由于iframe, 该演示无法在该网站上运行, 因此请在新窗口中打开它进行测试。

结论

尽管还有其他很棒的实现也可以使用此插件, 例如Google Chrome团队的Guitar Tune演示：

如你所见, 此插件是最简单的实现之一。

编码愉快！