Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.52k stars 983 forks source link

Undefined reference to Tone when loading Tone.js in headless Chrome #955

Closed fifthist closed 2 years ago

fifthist commented 3 years ago

There seems to be a discrepancy in how Tone is imported into headless browsers post version 14.5.37

To Reproduce

import asyncio
from pyppeteer import launch

async def main():
  browser = await launch({
    "headless": True,
    "ignoreDefaultArgs": [
      "--mute-audio",
    ],
    "args": [
      "--autoplay-policy=no-user-gesture-required",
      "--no-sandbox",
      "--disable-dev-shm-usage",
      "--disable-gpu",
      "--no-zygote",
      '--disable-setuid-sandbox',
      '--single-process'
    ]
  })
  page = await browser.newPage()
  await page.addScriptTag({ 
    "url": "https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.26/Tone.min.js"
    # THIS WORKS
    # "url": "https://cdnjs.cloudflare.com/ajax/libs/tone/14.5.37/Tone.min.js" 
  })
  res = await page.evaluate('''() => {
    return {
      "r": Tone.toString()
    }
  }''')
  await browser.close()
  return res

def handler(context, event):
  return asyncio.run(main())

Expected behavior Tone loaded into global namepsace.

What I've tried Loading version 14.5.37 instead of the latest version, and this seems to work.

tambien commented 3 years ago

I don't think Tone.toString() is a valid function in the latest version. Maybe it previously worked before moving entirely over to typescript.

Try something like Tone.version.toString() instead.

fifthist commented 3 years ago

The namespace Tone is missing entirely.

tambien commented 3 years ago

@fifthist do you have any guesses what might be causing this issue in this specific context? I can confirm that loading that cloudflare link in a browser script tag works fine:

image

I can also see the UMD header that webpack adds is the same in both:

14.8.26

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Tone=e():t.Tone=e()}("undefined"!=typeof self?self:this,function()

14.5.37

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Tone=e():t.Tone=e()}("undefined"!=typeof self?self:this,function()

I also use puppeteer for testing all of the example pages that works fine, but i load the script tag on the page, not through addScriptTag. Your help in debugging this setup would be greatly appreciated.

fifthist commented 3 years ago

@tambien I'll take a look. Can you paste how you load Tone with puppeteer on the page?

fifthist commented 2 years ago

Issue was with an old headless-chrome binary I was using. Having puppeteer download the latest headless chrome binary resolves the issue.