本文概述
- 1.包括吉他调音器脚本
- 2.初始化调谐器的单个实例
- 3.多个调谐器实例
- 现场例子
- 结论
在本文中, 你将学习如何在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="http://www.srcmini.com/onlinetunner.min.js">
<
/script>
安装后, 你将能够在窗口中使用OnlineTuner对象访问该调谐器。借助Web Audio API进行调整, 以操纵频率等, 并借助Media API从麦克风检索音频。有关此炫酷库的更多信息, 请访问Github上的官方存储库。
2.初始化调谐器的单个实例 【使用onlinetuner.co在JavaScript中实现Live Guitar Tuner】调谐器的初始化非常简单。该库可在画布上操纵和呈现信息, 因此你需要做的第一件事是创建一个画布元素, 该元素将在初始化期间使用。你最多可以自定义将在画布上呈现的图表的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 timevar tuners = [new OnlineTuner.Controller.GuitareTuner(new OnlineTuner.Widget.CircleWidget(Settings.container, Settings.backgroundColor, Settings.notOkayColor, Settings.okayColor, Settings.fontColor))];
// Initialize the tuner with the callbacksnew 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 functioninitializeTuner();
<
/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 timevar tuners = [// First tunernew OnlineTuner.Controller.GuitareTuner(new OnlineTuner.Widget.CircleWidget(Settings.container, Settings.backgroundColor, Settings.notOkayColor, Settings.okayColor, Settings.fontColor)), // Second Tunernew OnlineTuner.Controller.GuitareTuner(new OnlineTuner.Widget.CircleWidget(SettingsSecondTuner.container, SettingsSecondTuner.backgroundColor, SettingsSecondTuner.notOkayColor, SettingsSecondTuner.okayColor, SettingsSecondTuner.fontColor))];
// Initialize the tuner with the callbacksnew 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 functioninitializeTuners();
<
/script>
现场例子 使用以下吉他调音器现场演示, 拿起吉他并弹奏一些和弦(或单弦):
注意 在某些浏览器中, 由于iframe, 该演示无法在该网站上运行, 因此请在新窗口中打开它进行测试。
结论 尽管还有其他很棒的实现也可以使用此插件, 例如Google Chrome团队的Guitar Tune演示:
文章图片
如你所见, 此插件是最简单的实现之一。
编码愉快!
推荐阅读
- 如何在JavaScript中删除画布周围的透明像素
- 如何检查reCAPTCHA框是否已过期
- 使用VexFlow 2在JavaScript中渲染音乐符号(乐谱)
- 如何在JavaScript中从字符串名称执行函数(按名称执行函数)
- Java读取txt文件,并且对其文件内容进行统计排序
- Opencv图像读取,显示,保存,类型转换
- Java逐行读取数据
- java读取txt文件
- Numpy之线性代数