javascript 为什么Tone JS在Svelte组件中不好用？

pw9qyyiw 于 2023-08-02 发布在 Java

关注(0)|答案(3)|浏览(134)

我是相当新的苗条（我使用的版本2，直到3是正确的释放），我正在建立一个网站，旨在做一些音频分析（FFT）。因此，我将古老的ToneJS库（http://tonejs.github.io/）合并到我的一个组件中。
出于某种原因，仅仅导入ToneJS就足以使整个应用程序崩溃。
以下是我的Svelte组件的全部内容：

<h2>Pitch analyser</h2>

<script>
    import Tone from 'tone';

</script>

字符串
这会导致错误：

Tone.js:7 Uncaught TypeError: Cannot assign to read only property 'listener' of object '#<AudioContext>'
at t.Context.set (Tone.js:7)
at t.Listener.<anonymous> (Tone.js:7)
at Function.e.getContext (Tone.js:7)
at new t.Listener (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Object.<anonymous> (Tone.js:7)
at i (Tone.js:1)
at Tone.js:1

型
这可能不是Svelte特有的，但我已经在许多其他项目（包括React内部等）中成功使用了Tone JS，没有遇到任何麻烦。
是什么引起的？如何开始在我的Svelte应用程序中使用ToneJS？（使用Rollup打包/编译）

JavaScript

来源：https://stackoverflow.com/questions/55039122/why-does-tone-js-not-play-nice-in-a-svelte-component

3条答案

按热度按时间

5kgi1eie1#

这是因为Rollup作为原生JavaScript模块打包器，必须将所有JS视为严格模式（因为JavaScript模块始终是严格的），即使它们是从遗留格式转换而来的。
不幸的是，Tone.js正在做违反严格模式的事情（分配给不可写的属性）。我会建议提交一个问题上的回购;严格模式更快、更安全，没有理由不支持严格模式环境。
与此同时，您可以通过将Tone.js作为常规<script>标记包含在内并在应用中将其作为全局引用来解决它。

赞(0）回复(0）举报 2023-08-02

vof42yt12#

将intro:行放入rollup.config.js中，为我解决了这个问题：

output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/bundle.js',
    // Added this line:
    intro: 'var global = typeof self !== undefined ? self : this;'
},

字符串

赞(0）回复(0）举报 2023-08-02

sqyvllje3#

2023年更新：

如果你试图在svelte 4 / sveltekit 1.0项目中使用Tone.js，这里有一个潜在的解决方案，尽管代价是SSR：
在您尝试使用的任何路由中创建+layout.ts（即src/routes/+layout.ts）并设置：

export const ssr = false;

字符串
这应该可以通过禁用ssr步骤来阻止Tone.js在node中运行，这是必要的，因为它依赖于Web Audio API。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 为什么Tone JS在Svelte组件中不好用？

3条答案

相关问题

热门标签

最新问答