Viano
made with Vuejs

Viano

这是一个使用Vue组件编写歌曲的工具。

相关问答
暂无相关问题
查看全部
简介及使用教程

Viano是一个使用Vue组件编写歌曲的工具。这不是一个很棒的音乐创作工具,仅仅是一个有趣的玩具。

编写的歌曲听起来像是在木管乐器上播放的80年代的铃声。

这也是使用Vue组件的概念证明(proof-of-concept)——可以作为一种使用特定领域语言来编写声明性代码的工具。

安装

这个工具并没有发布到NPM,所以,你需要下载源码到本地:

git clone https://github.com/isaaclyman/Viano.git myproject
cd myproject

安装依赖

npm i

运行

npm run serve

使用

在写歌之前你需要懂得一些基本的音乐理论知识,比如c4、四分音符等。

<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>

示例效果:http://isaaclyman.com/Viano/

组件列表

  • <Song> Viano中唯一的可见标记元素,显示简单的play/stop按钮。属性:

    • title 可选,默认Untitled 显示在控制按钮后面
    • tempo 可选,默认 120, 每分钟的节拍数
    • time-signature 可选,默认  [4, 4],歌曲的time signature,其中[4,4]被理解为四分音符。
  • <Part> <Song>组件下唯一的子元素,指示它所包含的音乐应该从何处开始。可以包含<Sequence><Note><Rest><Chord>四个组件。属性:

    • measure 可选,默认为0,音乐应该从哪里开始。0表示于第一个measure的开始。
  • <Sequence> 包含<Note><Rest><Chord>,按包含顺序播放。属性:
    • repeat 可选,如果存在,则表示在一行中重复序列的次数。
  • <Note> 一定时间内播放的单个音符。属性:
    • name 必填,a0和c8之间的音符
    • value 必填,可以是字符如1/4或者数字0.25,Note的值
    • repeat 可选,重复次数
    • styles 可选,blackswan-js的样式值,详见https://github.com/isaaclyman/blackswan-js#styles
  • <Rest> 表示一定时间内的休息(播放的音符之间的间隔)。属性:
    • value 必填,同<Note>value值。
  • <Chord> 表示一个或多个同时播放一定时间的音符。
    • notes 必填 如"c4 e4 g4" 或 array (['c4', 'e4', 'g4'])
    • repeatstylesvalue;参见<Note>

image.png

作者

Isaac Lyman

@isaacandsuch

相关项目