@_000407/transpose.js 中文文档教程

Question

transpose.js - Chord Transposition made simple

这是一个简单的实用程序，用于移调给定乐曲中的和弦。 一旦包含和弦的元素的 CSS 选择器和目标换位索引被提供，库就可以将在所述元素中定义的和弦换位到给定的换位索引。 转置索引 i 在 [-12 <= i <= +12] 范围内。

Getting Started

Using npm

import { Transpose } from '@_00407/transpose.js';

const t = new Transpose();
t.transpose(+1);

Plain JS

<script type="text/javascript" src="https://kanchana.senadheera.net/transpose.js/dist/transpose.min.js"></script> <!-- Transposer instance will be initialized in the window object -->

<button class="transpose transpose-down" onclick="Transposer.transpose(-1)">-1</button>
<button class="transpose transpose-reset" onclick="Transposer.transpose(0)">R</button>
<button class="transpose transpose-up" onclick="Transposer.transpose(+1)">+1</button>

Prerequisites

N/A

Installing

Using npm

npm install @_000407/singlish.js

Plain JS

<script type="text/javascript" src="https://kanchana.senadheera.net/transpose.js/dist/transpose.min.js"></script>

Configuration

您可以自定义移调输出渲染的行为、和弦容器的选择等，如下所示。

1. During instantiation - accepts an object contains configuration
2. Calling init method of an instance - accepts an object contains configuration

Property	Description	Type	Req/Opt	Default
selector	CSS selector of the elements that contain the chords.	string	Optional	span.chord
render	Function that renders the transposed chord output.	function	Optional	see Rendering

Rendering

默认情况下，渲染是使用以下函数完成的。

function(offset) {
  for(let c of document.querySelectorAll(this.selector)) {
    c.innerHTML = this.transposeChord(c.innerHTML, offset);
  }
}

Example

// During construction
const t = new Transposer({
    selector: "span.chord",
    render: function(offset) {
        console.log("Overridden version");
        for(let c of document.querySelectorAll(this.selector)) {
            c.innerHTML = this.transposeChord(c.innerHTML, offset);
        }
    }
});

// Using init method
t.init({
    selector: "span.chord",
    render: function(offset) {
        console.log("Overridden version");
        for(let c of document.querySelectorAll(this.selector)) {
            c.innerHTML = this.transposeChord(c.innerHTML, offset);
        }
    }
});

Running the tests

N/A

Break down into end to end tests

N/A

Deployment

N/A

Built With

N/A

Contributing

N/A

Versioning

我们使用 SemVer 进行版本控制。 有关可用版本，请参阅此存储库上的标签。

Authors

• Kanchana Senadheera - Initial work - 000407

另请参阅参与此项目的贡献者列表。

License

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE.md 文件

Acknowledgments

N/A