Viano

screenshot of Viano
vue
scss

A toy that lets you write songs using Vue components.

Overview

Viano is an intriguing tool that enables users to write songs through Vue components, targeting the Web Audio API. While it may not be the ultimate solution for music composition, it offers a playful and accessible way to experiment with music creation, especially for those with a basic understanding of music theory. Although the resulting tunes might resemble quirky '80s ringtones played on a woodwind instrument, it’s a great way to dive into the world of declarative programming in a musical context.

The main objective of Viano is to serve as a proof-of-concept demonstrating how Vue component markup can be utilized to create a domain-specific language for music. While it’s not designed for production use, it provides a creative outlet and could spark ideas for aspiring developers and musicians alike.

Features

  • Web Audio API Compatibility: Utilizes the Web Audio API for audio processing, ensuring modern browser compatibility, specifically with the latest versions of Chrome.
  • Vue Component Markup: Leverages Vue.js components, allowing users to engage with a familiar framework while writing declarative music code.
  • Basic Music Theory Integration: Encourages users to learn foundational music concepts, such as note names and values, to craft their songs.
  • Customizable Attributes: Features options like title, tempo, and time signature for each song, giving users control over their musical creations.
  • Unique Musical Elements: Introduces elements like <Song>, <Part>, <Sequence>, <Note>, <Rest>, and <Chord>, each with specific attributes, to build complex compositions.
  • Open for Contributions: As an open-source project, Viano invites users to contribute enhancements and new features, fostering a community of creators.
  • Interactive Demo: Comes with a demo utilizing the famous "La Cucaracha" tune, allowing users to see Viano in action and inspire personal music projects.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.