vue组件编写 组件库

维亚诺 (Viano)

A toy that lets you write songs using Vue components.

一种玩具，可让您使用Vue组件编写歌曲。

Targets the Web Audio API. Most compatible with up-to-date Chrome.

定位到Web Audio API。 与最新的Chrome浏览器最兼容。

Uses blackswan.js.

使用blackswan.js。

总览 (Overview)

This is not a great music composition tool, but it is a fun toy. Your songs will sound like an '80s ringtone played on a miscellaneous woodwind. Oh well.

这不是一个很棒的音乐创作工具，但它是一个有趣的玩具。 您的歌曲听起来像是在其他木管乐器上播放的80年代铃声。 那好吧。

This is also a proof-of-concept for using Vue component markup as a tool for writing declarative code in a domain-specific language.

这也是将Vue组件标记用作以特定于域的语言编写声明性代码的工具的概念证明。

Probably don't use this in production code.

可能不要在生产代码中使用它。

安装 (Installation)

Viano isn't published on NPM and isn't set up for inclusion in other projects. To play with it: clone the repository, npm install, npm run serve. src/Demo.vue currently includes the "La Cucaracha" player, but you can add other players for your own songs (PRs always welcome).

Viano未在NPM上发布，也未设置为包含在其他项目中。 要使用它：克隆存储库， npm install ， npm run serve 。 src / Demo.vue当前包括“ La Cucaracha”播放器，但您可以为自己的歌曲添加其他播放器(始终欢迎PR)。

用法 (Usage)

To write a song in Viano you'll need to understand some basic music theory, such as the names of the notes (e.g. "c4") and note values (e.g. "quarter note").

要用Viano编写歌曲，您需要了解一些基本的音乐理论，例如音符的名称(例如“ c4”)和音符值(例如“四分音符”)。

The first line of "La Cucaracha" in Viano looks like this:

Viano中的“ La Cucaracha”的第一行如下所示：

<Song title="La cucaracha" :tempo="200" :time-signature="[4, 4]"><Part :measure="0"><Sequence><Note name="c4" value="1/8" :repeat="3">          La cuca-</Note><Note name="f4" value="3/8">               ra-</Note><Note name="a4" value="1/4">               cha</Note><Note name="c4" value="1/8" :repeat="3">   La cuca-</Note><Note name="f4" value="3/8">               ra-</Note><Note name="a4" value="1/4">               cha</Note><Rest value="3/8"></Rest><Note name="f4" value="1/4">                      ya</Note><Note name="f4" value="1/8">               no</Note><Note name="e4" value="1/8" :repeat="2">   puede</Note><Note name="d4" value="1/8" :repeat="2">   cami-</Note><Note name="c4" value="3/8">               nar</Note></Sequence></Part>
</Song>

<Song> (<Song>)

This element is the root of the Viano code. It is the only Viano element to have visible markup associated with it: a simple play/stop control.

此元素是Viano代码的根。 它是唯一带有可见标记的Viano元素：一个简单的播放/停止控件。

Attributes:

属性：

• title: (optional: default 'Untitled') a string. Will be displayed next to the play/stop control.

  title ：(可选：默认为“ Untitled”)一个字符串。 将显示在播放/停止控件旁边。

• tempo: (optional: default 120) a number. The beats per minute for this song.

  tempo ：(可选：默认为120)一个数字。 这首歌的每分钟节拍数。

• time-signature: (optional: default [4, 4]) an array of two numbers. The time signature for the song, where [4, 4] is understood as 4/4 time.

  time-signature ：(可选：默认[4，4])两个数字组成的数组。 歌曲的时间签名，其中[4，4]被理解为4/4时间。

<Part> (<Part>)

This is the only element that can be inside of a <Song>. It indicates the measure at which the music it contains should start. It can contain a <Sequence>, <Note>, <Chord>, or <Rest>.

这是<Song>内部唯一的元素。 它指示其中包含的音乐应开始的小节。 它可以包含<Sequence> ， <Note> ， <Chord>或<Rest> 。

Attributes:

属性：

• measure: (optional: default 0) a number. The measure where the music should start. 0 corresponds to the beginning of the first measure.

  measure ：(可选：默认为0)一个数字。 音乐应从哪里开始测量。 0对应于第一小节的开始。

<Sequence> (<Sequence>)

This element contains a series of <Note>, <Chord>, and <Rest> which will be played in order.

该元素包含一系列<Note> ， <Chord>和<Rest> ，它们将按顺序播放。

Attributes:

属性：

• repeat: (optional) a number. If present, indicates the number of times in a row that the sequence should be repeated.

  repeat ：(可选)一个数字。 如果存在，表示连续重复该序列的次数。

<Note> (<Note>)

This element represents a single note played for a certain amount of time.

该元素表示在一定时间内演奏的单个音符。

Attributes:

属性：

• name: (required) a string. The note between a0 and c8 which should be played.

  name ：(必需)字符串。 应在a0和c8之间播放的音符。

• value: (required) a string ("1/4") or number (0.25). The note value, where "1/4" is a quarter note.

  value ：(必需)字符串(“ 1/4”)或数字(0.25)。 音符值，其中“ 1/4”是四分音符。

• repeat: (optional) a number. See the attribute of the same name on <Sequence>.

  repeat ：(可选)一个数字。 请参见<Sequence>上具有相同名称的属性。

• styles: (optional) an array of blackswan-js style values. See the blackswan-js docs for a full list.

  styles ：(可选)blackswan-js样式值的数组。 有关完整列表，请参见blackswan-js文档 。

<Rest> (<Rest>)

This element represents a rest (a gap between notes played) for a certain amount of time.

此元素表示一定时间的休息(演奏的音符之间的间隔)。

Attributes:

属性：

• value: (required) a string or number. See the attribute of the same name on <Note>.

  value ：(必需)字符串或数字。 请参见<Note>上具有相同名称的属性。

<Chord> (<Chord>)

This element represents one or more notes played simultaneously for a certain amount of time.

此元素表示在一定时间内同时演奏的一个或多个音符。

Attributes:

属性：

• notes: (required) a string ("c4 e4 g4") or array (['c4', 'e4', 'g4']).

  notes ：(必填)字符串(“ c4 e4 g4”)或数组(['c4'，'e4'，'g4'])。

• repeat, styles, and value: see the attributes of the same name on <Note>.

  repeat ， styles和value ：请参见<Note>上具有相同名称的属性。

贡献 (Contributing)

There are lots of opportunities to contribute in this repository. You can submit a PR adding a new song to src/Demo.vue, fixing a bug, adding tests, and so forth. There aren't any rules about branch names, commit messages, or PR descriptions. Just describe what you're doing, be nice, and try to follow the project style.

在此存储库中有很多贡献的机会。 您可以提交PR，在src / Demo.vue中添加新歌曲，修复错误，添加测试，等等。 关于分支名称，提交消息或PR描述，没有任何规则。 只需描述您正在做的事情，保持友善，然后尝试遵循项目风格即可。

If this is your first open-source PR, let me know and I'll try to be extra helpful.

如果这是您的第一个开源PR，请告诉我，我会尽力提供帮助。

翻译自: https://vuejsexamples.com/a-toy-that-lets-you-write-songs-using-vue-components/

vue组件编写 组件库