问题标签 [vexflow]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
96 浏览

angular - 如何从 Angular 组件中销毁 VexFlow 渲染器?

在 Angular 应用程序中,我正在创建一个 VexFlow 渲染器:

使用服务方法:

我将 DOM 引用传递document.getElementById(elementName);给渲染器构造函数。

ngOnDestroy()我应该在组件方法中做一些释放吗?

更新:这是实际的完整组件的样子:

使用模板:

现在,也许有一种方法可以使用@ViewChild(name) name: ElementRef;注释,但这不会编译:

0 投票
1 回答
303 浏览

vexflow - 如何在 VexFlow 中渲染配乐?

使用Tone.js并且我可以演奏这个旋律:

现在,我想VexFlow在一些五线谱上渲染这些音符。

请记住,移动设备上的显示应该没问题,并且配乐上可能有多个声音。

现在我创建了一个方法来让每个小节都有一个五线谱:

但是音符在五线谱上显示了一点,但有些音符显示在五线谱之间,在页面上。

之间

0 投票
2 回答
85 浏览

angularjs - 为什么我使用 $sce.trustAsHtml("
");

我正在尝试通过 angularja 将 Vexflow sheetmusic 动态加载到 Divng-bind-html$sce.trustAsHtml("<div id='boo'></div>")。这适用于$sce.trustAsHtml("<p>Hello World</p>"). 放入<div id='boo'></div>页面正文也可以。它不会将乐谱加载到带有 ng-bind-html 的 div 中$sce.trustAsHtml("<div id='boo'></div>")

0 投票
1 回答
135 浏览

vexflow - note 中未排序的键将被排序

我正在创建一个带有多个键的五线谱注释:

我在浏览器控制台中收到以下警告:

我知道我需要提供已经按照 Vexflow 对它们进行排序的方式排序的

那里也描述了一个类似的问题。

如何对note.pitch.chroma.value作为字符串的键进行排序?

最好有一些与以下相同的方法:

说,一些这样的方法:

或者:

更新:根据建议,我可以在将音符添加为五线谱中的键之前创建对音符进行排序的方法:

Vexflow警告消息不再显示在浏览器控制台中。

0 投票
0 回答
97 浏览

vexflow - 为什么我的 Vexflow 注释会飘到底部?

我的应用程序在五线谱下显示文本注释,但在每个五线谱之后,这些注释越来越多地飘到底部。单击音乐选项卡中的新建按钮可创建五线谱。

我正在创建这样的注释:

第一个参数 0 索引是什么?我尝试使用不同的数值来玩它,但什么也没看到。

这是渲染注释的方法:

它是从循环中调用的:

这是它的样子: 在此处输入图像描述

更新:作为一项临时措施,我可以找到一种解决方法来解决我的最终用户可能接受的问题,将文本注释垂直居中显示。

在此处输入图像描述

0 投票
1 回答
57 浏览

javascript - 使用 vexflow 渲染高音和低音五线谱

我一直在关注vexflow渲染教程,它提供了一个渲染单个五线谱的示例。这工作正常。我现在想渲染指南中没有解释的高音和低音。我能想到的最简单的方法是复制示例代码来呈现两者。

在此处输入图像描述

这种工作,但如果我举一个使用另一个工具呈现的例子,你可以看到我的例子缺少 { 连接两边以及条之间的线。vexflow 是否提供一些内置功能来渲染两个谱表?

musescore 渲染表

0 投票
0 回答
44 浏览

javascript - 从 music21 流转换为 vexflow 脚本代码

似乎music21 python包能够显示音乐符号,但不允许我查看通过music21j库生成的脚本。我所能看到的只是详细的 Python 流,而不是使用 Vexflow 的 Javascript 脚本?当我执行它的 vexflow 转换器时,如何查看 music21 包生成的源代码?

0 投票
1 回答
62 浏览

javascript - 为什么这个基本的 VEXFLOW 代码什么也不渲染?

我在 VEXFLOW 中有一段代码

为什么这段代码没有渲染任何东西。在浏览器中什么都看不到。

0 投票
1 回答
141 浏览

javascript - (javascript反应)无法执行vexflow的easyscore教程

我想在反应上画一个五线谱,我正在阅读使用 EasyScore:Vexflow 官方教程

下面是我的反应代码。

我在反应 TypeError 中遇到错误:this.element.appendChild is not a function

我的一些代码涉及

我会很感激你的帮助。请给我一些建议。

0 投票
0 回答
40 浏览

javascript - 如何通过 Svelte 在 Meteor 中使用 VexTab

我相信我的问题的答案很简单,希望你能帮助我找出那是什么!

我已经使用meteor create --svelte project-name.

然后我添加了两个这样的包:meteor npm install --save vexflow vextab. (VexFlow 网站在这里

然后我进去修改 App.svelte 看起来像这样:

代码编译,但是当我单击按钮显示音乐时,错误显示: App.svelte:4 Uncaught TypeError: Cannot read property 'Flow' of undefined,这是引用Vex.Flow.

无论我如何更改导入行,我都无法让它识别 Vex!它总是以未定义的形式出现。

我错过了什么?

笔记:

流星版本:2.4