isaaclyman / viano

A toy that lets you write songs using Vue components.

Viano

A toy that lets you write songs using Vue components.

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

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

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

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

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").

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

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

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.

Attributes:

• title: (optional: default 'Untitled') a string. Will be displayed next to the play/stop control.
• tempo: (optional: default 120) a number. The beats per minute for this song.
• 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.

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

Attributes:

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

<Sequence>

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

Attributes:

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

<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.
• value: (required) a string ("1/4") or number (0.25). The note value, where "1/4" is a quarter note.
• repeat: (optional) a number. See the attribute of the same name on <Sequence>.
• styles: (optional) an array of blackswan-js style values. See the blackswan-js docs for a full list.

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

<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']).
• repeat, styles, and value: see the attributes of the same name on <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.

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

If you know your way around the Web Audio API or synthesizers in general, you're invited to contribute to blackswan.js.

Thanks to Mirza Zulfan for creating the project logo.

viano's Issues

Problem when executing npm run serve

Hi!
I'm getting this error when trying to execute npm run serve:

`/home/jesus/repos/Viano/node_modules/@vue/cli-service/bin/vue-cli-service.js:4
const { error } = require('@vue/cli-shared-utils')
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Function.Module.runMain (module.js:442:10)
at startup (node.js:136:18)
at node.js:966:3`

I'm running Linux Mint 18.2 Sonya, npm version 3.5.2. Any hints?

logo proposal

Good evening @isaaclyman
I would like to contribute to your awesome project by proposing a logo design for it if you allow me. I'll be doing it as a gift for free to your awesome project.
Thanks.

Nothing showed in safari for http://isaaclyman.com/Viano/

Safari console showed "ReferenceError: Can't find variable: AudioContext"

https://image.ibb.co/gM01ex/image.png

Propose Logo/Icon

Hi @isaaclyman . I'm a graphic designer and an open source enthusiast. I would like to contribute to your awesome project by proposing logo design for it if you allow me. I'll be doing it as a gift for free to your awesome project.
Best regard.
Mirza zulfan

:repeat on Sequence not working

I tried to use repeat on Sequence:
<Sequence :repeat="8">
and got this error in console:

Uncaught DOMException: Failed to execute 'start' on 'AudioScheduledSourceNode': cannot call start more than once.
    at T (webpack-internal:///./node_modules/blackswan-js/dist/blackswan.js:1:6064)
    at Object.Play (webpack-internal:///./node_modules/blackswan-js/dist/blackswan.js:1:6416)
    at M (webpack-internal:///./node_modules/blackswan-js/dist/blackswan.js:1:6649)
    at Object.play (webpack-internal:///./node_modules/blackswan-js/dist/blackswan.js:1:6768)
    at VueComponent.togglePlay (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/Users/fmalik/workspaces/tmp/viano/Viano/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Song.vue (http://localhost:8080/app.js:847:1), <anonymous>:50:19)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-319a0ec5","hasScoped":true,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Song.vue (http://localhost:8080/app.js:1685:1), <anonymous>:14:17)
    at invoker (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2022:18)
    at HTMLDivElement.fn._withTask.fn._withTask (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1821:18)