<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>fm</h1>
<div id="app">
<envelope-settings
v-for="envelope in envelopes"
v-bind="envelope"
v-on:attack="envelope.attack = $event"
v-on:sustain="envelope.sustain = $event"
v-on:decay="envelope.decay = $event"
v-on:release="envelope.release = $event">
</envelope-settings>
<envelope-settings
title="Carrier"
v-bind="carrier"
v-on:attack="carrier.attack = $event"
v-on:sustain="carrier.sustain = $event"
v-on:decay="carrier.decay = $event"
v-on:release="carrier.release = $event">
</envelope-settings>
<envelope-settings
title="Modulator"
v-bind="modulator"
v-on:attack="modulator.attack = $event"
v-on:sustain="modulator.sustain = $event"
v-on:decay="modulator.decay = $event"
v-on:release="modulator.release = $event">
</envelope-settings>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="fm.js"></script>
<script src="index.js"></script>
</body>
</html>