npm包guitar-js使用教程

阅读时长 8 分钟读完

简介

guitar-js是一个使用于node.js环境下的npm包,提供了一系列的吉他乐谱生成和处理的工具。

在前端开发的过程中,我们经常需要处理吉他乐谱的问题,例如展示和编辑吉他谱,自动转换和生成吉他谱等。而guitar-js恰好提供了这方面非常实用的工具。

本文就是一篇介绍npm包guitar-js的使用教程,帮助你更好地了解和运用这个npm包。

安装

使用npm命令安装guitar-js,可以在你的项目目录下执行以下命令:

功能

guitar-js提供的主要功能如下:

  • 将吉他谱转为HTML格式,便于展示
  • 将吉他谱转为ASCII字符,便于保存和分享
  • 自动识别和转换吉他谱的调弦方式
  • 方便的API调用,支持动态生成吉他谱等功能

下面我们一一介绍如何使用这些功能。

将吉他谱转为HTML格式

使用guitar-js可以方便地将吉他谱转化为HTML格式,以便于在网页上方便地展示和浏览。

在代码中引入guitar-js,使用generateHtml函数即可将吉他谱转为HTML格式。例如假设我们将吉他谱定义为一个对象guitarTab,那么可以执行以下代码:

-- -------------------- ---- -------
----- ------ - ---------------------

----- --------- - -
  ------- ----- ---- ---- ---- ---- -----
  ------ -
    --- ---- ---- ---- ---- ---
    --- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- -----
    ----- -- -- -- ---- -----
    ----- ---- ---- ---- ---- ----
  -
--

--------------------------------------------

其中的guitarTab就是吉他谱的对象,内容包括了每根弦和每个品位所对应的数据。执行以上代码后,返回一个包含了吉他谱HTML代码的字符串,类似于以下内容:

-- -------------------- ---- -------
---- ---------------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
    ---- ------------- ---
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
        ---- --------------------
    ------
------

这个HTML代码包含了吉他谱的所有信息,包括六根弦和每个品位上的音符。

将吉他谱转为ASCII字符

如果需要将一个吉他谱转换为能够保存和分享的格式,那么可以使用guitar-js将它转换为ASCII字符。

使用guitar-js的ASCII谱代码生成器,可以很方便地将吉他谱转换为ASCII字符,例如:

-- -------------------- ---- -------
----- ------ - ---------------------

----- --------- - -
  ------- ----- ---- ---- ---- ---- -----
  ------ -
    --- ---- ---- ---- ---- ---
    --- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- -----
    ----- -- -- -- ---- -----
    ----- ---- ---- ---- ---- ----
  -
--

----------------------------------------

执行以上代码后,将返回以下内容:

这段文本就是按照ASCII码格式生成的吉他谱谱表,包含了吉他谱的所有信息。

自动识别和转换吉他谱的调弦方式

guitar-js可以自动识别并转换各种调弦方式的吉他谱。

例如,假设我们有这样一段吉他谱,使用了不太常见的7弦吉他调弦方式(BEADGC):

-- -------------------- ---- -------
----- --------- - -
  ------- ----- ---- ---- ---- ---- ---- -----
  ------ -
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- -----
    --- ---- ---- ---- ---- ---- ----    
  -
--

我们希望将它转换为标准6弦吉他调弦方式(EADGBE),那么只需要在使用generateHtml或asciiTab函数时,给它传递一个新的调弦方式参数即可。例如:

这样就可以将原始的7弦吉他谱,转换为标准的6弦吉他谱。guitar-js会根据原始的调弦方式,自动计算出新的调弦方式,并进行替换。

API调用

guitar-js提供了丰富的API,可以满足各种吉他谱操作的需求。

例如,我们需要动态生成一个吉他谱谱表,可以执行以下代码:

以上代码会动态创建一个6品位的6弦吉他谱,生成的ASCII谱代码如下:

除此之外,还有很多其他的API可以满足各种需求,具体可以参考官方文档。

总结

guitar-js是一个非常实用的npm包,可以方便地处理吉他谱相关的问题。在前端开发中,我们经常需要用到这方面的功能,因此掌握guitar-js的使用方法非常有必要。

本文就是一份关于npm包guitar-js使用教程,希望对你有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055ab981e8991b448d8535

纠错
反馈