# Scribbletune & Tone.js integration

**URL:** <https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311>\
**Category:** General\
**Created:** [14 February 2022 12:38 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311 "2022-02-14T12:38:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lizzardguki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lizzardguki/32/103637_2.png) [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)\
**Post date:** [14 February 2022 12:38 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/1 "2022-02-14T12:38:50Z")

</div>

I'm trying to generate audio using Scribbletune & Tone.js through node-red and have it play on a webpage via Tone...  
I found [this tutorial](https://scribbletune.com/documentation/installation) but not sure how can I integrate webpack, and import scribbletune/browser and tone in template node/ Dashboard template node...

I only managed to successfully create a MIDI file with base scribbletune integration that is not of much use...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 February 2022 12:42 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/2 "2022-02-14T12:42:20Z")

</div>

You could simply import the `scribbletune` package in a function node (setup tab, add import) then build a dashboard to automate it.

NPM Link: [scribbletune - npm](https://www.npmjs.com/package/scribbletune)

---

<div class="post-metadata">

**Author:** ![lizzardguki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lizzardguki/32/103637_2.png) [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)\
**Post date:** [14 February 2022 12:44 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/3 "2022-02-14T12:44:42Z")

</div>

Yes but i also want to integrate **tone** to convert the midi data to hearable audio...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 February 2022 12:55 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/4 "2022-02-14T12:55:10Z")

</div>

to play where?

In the browser? or to generate audio data for saving to file / for later download links etc?

As you are probably aware, **tone** requires a browser (since it uses Web audio API) so it all depends how you want to architecture this.

For example,

- you can do it all in a browser e.g.
  - use template nodes to generate a dashboard page
  - write a web app for ui-builder

- you could generate midi notes in node-red (server side) and transmit them to the browser where the sound can be generated using tone (client side)
- you could generate midi notes and use tone + web-audio-api all at server side

* * *

What is your intended use and application?

---

<div class="post-metadata">

**Author:** ![lizzardguki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lizzardguki/32/103637_2.png) [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)\
**Post date:** [14 February 2022 13:07 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/5 "2022-02-14T13:07:55Z")

</div>

Okay, the initial idea is to use inject node to pass in the notes, and on the webpage (from HTTP nodes) play it...

I used a template node to import Tone and scribbletune

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f0e1313974e260d905e6aded5efcf7682562f07.png)  
And from firefox console managed to play a sound...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/7989977769bb5418bee2ee44e8a7c31442172eaa.png)

---

<div class="post-metadata">

**Author:** ![lizzardguki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lizzardguki/32/103637_2.png) [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)\
**Post date:** [14 February 2022 13:16 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/6 "2022-02-14T13:16:20Z")

</div>

but i want something like this to work...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f8723a6180f1b6124f6a777d1e78f8fb9dc44f8.png)  
But I get some errors from scribble back  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/865b5eea30daafb51f80b12ee1823be37d2a3f85.png)

---

<div class="post-metadata">

**Author:** ![lizzardguki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lizzardguki/32/103637_2.png) [@lizzardguki](https://discourse.nodered.org/u/lizzardguki)\
**Post date:** [14 February 2022 13:22 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/7 "2022-02-14T13:22:57Z")

</div>

Managed to get something playing entirely from template node, I think I can work myself from here thank you @Steve-Mcl for trying to help!

For anyone who wants to play with this here is a really simple flow that just loops through note sequence!

```auto

[
    {
        "id": "99af1fd06d2a33d3",
        "type": "http in",
        "z": "1b804b1f26de6b42",
        "name": "",
        "url": "/play",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 220,
        "y": 440,
        "wires": [
            [
                "ede6737adda30f0f"
            ]
        ]
    },
    {
        "id": "7a6bf8a198a8ff07",
        "type": "http response",
        "z": "1b804b1f26de6b42",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 530,
        "y": 440,
        "wires": []
    },
    {
        "id": "ede6737adda30f0f",
        "type": "template",
        "z": "1b804b1f26de6b42",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "html",
        "syntax": "mustache",
        "template": "<html>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.43/Tone.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/scribbletune/4.1.1/scribbletune.js\"></script>\n\n</html>\n<script>\n \n scribble.clip({\n synth: 'PolySynth', // new property: synth\n pattern: '[xx]',\n notes: 'C4 D4 C4 D#4 C4 D4 C4 Bb3'\n },{}).start();\n\n Tone.context.resume().then(() => Tone.Transport.start());\n</script>",
        "output": "str",
        "x": 360,
        "y": 440,
        "wires": [
            [
                "7a6bf8a198a8ff07"
            ]
        ]
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 February 2022 13:24 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/8 "2022-02-14T13:24:35Z")

</div>

ok, so to pass something from node-red to a web page you need a mechanism - e.g. websocket or polling an endpoint etc.

You could of course use a dashboard ui-template (then watch scope for incoming messages)  
OR  
use uibuilder to host your web page then use the vue hooks to receive incoming msgs

Basic structure of dashboard version...  
inject --\> function (import and use scribbletune to generate notes) --\> ui-template (watch scope for msg then call `Tone` with msg.payload)

Basic structure of ui-builder version...  
inject --\> function (import and use scribbletune to generate notes) --\> uibuilder (use vue hook to watch for msg then call `Tone` with msg.payload)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 February 2022 13:24 UTC](https://discourse.nodered.org/t/scribbletune-tone-js-integration/58311/9 "2022-02-28T13:24:58Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.