点燃乐谱

#点燃乐谱在本文中，我将介绍如何设置 [Lit]() Web 组件，并使用它从 src 属性或使用 [opensheetmusicdisplay]() 的内联 xml 渲染 [musicxml]()。现在，任何乐谱都可以根据浏览器宽度呈现为 svg 或画布（并且会在视口更改时调整大小）。 > **TLDR** 最终来源[此处]() 和在线[演示]()。 ## 先决条件 * VS代码 * 节点 >= 16 * 打字稿 ## 开始使用我们可以首先在终端中导航到项目位置并运行以下命令： npm init @vitejs/app --template lit-ts 然后输入项目名称“lit-sheet-music”，现在在 vscode 中打开该项目并安装依赖项： CD 点燃乐谱 npm 我点亮了 opensheetmusicdisplay npm i -D @types/node 代码。使用以下内容更新“vite.config.ts”：从“vite”导入{defineConfig}；从“路径”导入{解析}；导出默认的defineConfig({ 基础：“/lit-sheet-music/”，构建：{ 库：{ 条目：“src/lit-sheet-music.ts”，格式：[“es”]， }, 汇总选项：{ 输入：{ 主要：解析（__dirname，“index.html”）， }, }, }, }); ## 模板打开“index.html”并使用以下内容更新它： <头> <元字符集=“UTF-8”/> 点燃乐谱 <风格> 身体{ 保证金：0；填充：0； } <正文> <乐谱 src =“https://raw.githubusercontent.com/opensheetmusicdisplay/opensheetmusicdisplay/develop/demo/BrahWiMeSample.musicxml” > 如果打算使用本地 [musicxml]()，请使用以下内容更新“index.html”： <头> <元字符集=“UTF-8”/> 点燃乐谱 <风格> 身体{ 保证金：0；填充：0； } <正文> <乐谱> <脚本类型=“文本/xml”> <分数部分> <部分列表> <分数部分 id="P1"> <部分名称>语音 <部分id =“P1”> <测量编号=“0”隐式=“是”> <属性> <部门>4 <键> <五度>-3 <模式>主要 <时间> <节拍>2 <节拍类型>4 <谱号> <符号>G <行>2 <指令>Langsam，innig。 <注意> <音高> <步骤>G <八度>4 <持续时间>2 <类型>第八 <干>向上 <符号> <动态>

<歌词> <音节>单个第一 <测量编号=“1”> <注意> <音高> <步骤>F <八度>4 <持续时间>3 <类型>第八 <点/> <干>向上 <歌词> <音节>单个 <文本>杜 <注意> <音高> <步骤>E <改变>-1 <八度>4 <持续时间>1 <类型>16号 <干>向上 <歌词> <音节>单个 <文本>尼希特， <注意> <音高> <步骤>E <改变>-1 <八度>4 <持续时间>2 <类型>第八 <干>向上 <歌词> <音节>开始 <文本>万岁 <注意> <音高> <步骤>B <改变>-1 <八度>4 <持续时间>1 <类型>16号 <干>向上 <光束编号=“1”>开始 <光束编号=“2”>开始 <符号> <歌词> <音节>结束 <文本>蒙古包 <扩展/> <注意> <音高> <步骤>G <八度>4 <持续时间>1 <类型>16号 <干>向上 <光束编号=“1”>结束 <光束编号=“2”>结束 <符号> <歌词> <扩展/> 在本例中，我们将 src 属性传递给 Web 组件，但我们还可以添加一个脚本标签，其类型属性设置为“text/xml”，内容包含 json。 ## 网络组件在更新组件之前，我们需要将“my-element.ts”重命名为“sheet-music.ts” 打开“sheet-music.ts”并使用以下内容更新它：从“lit”导入{ html, css, LitElement }；从“lit/decorators.js”导入{customElement，属性，查询}；从“opensheetmusicdisplay”导入 { IOSMDOptions, OpenSheetMusicDisplay }; 类型 BackendType = "svg" | “帆布”; 类型 DrawingType = "紧凑" | “默认”; @customElement(“乐谱”) 导出类 SheetMusic 扩展 LitElement { _缩放= 1.0； @property({ 类型: 布尔值 })allowDrop = false; @property() src = ""; @query("main") canvas!: HTMLElement; 控制器？：OpenSheetMusicDisplay；选项： IOSMDOptions = { 自动调整大小：真，后端：“canvas”作为 BackendType，绘图参数：“默认”为绘图类型， }; 静态样式= css` 主要{ 溢出-x：自动； } `; 渲染（）{ 返回 html`

`; } 异步 renderMusic(内容: 字符串) { if (!this.controller) 返回；等待 this.controller.load(content); this.controller.zoom = this._zoom; this.controller.render(); this.requestUpdate(); } 私有异步 getMusic(): Promise { // 检查 src 属性是否已设置并优先于插槽 if (this.src.length > 0) return fetch(this.src).then((res) => res.text()); // 检查子槽是否存在并返回 xml const elem = this.parentElement?.querySelector( '脚本[类型=“文本/xml”]' ) 作为 HTMLScriptElement； if (elem) 返回 elem.innerHTML; // 如果两者都没有找到，则不返回任何内容返回“”； } 异步firstUpdated() { this.controller = new OpenSheetMusicDisplay(this.canvas, this.options); this.requestUpdate(); // 检查是否有音乐并更新（如果找到） const 音乐 = 等待 this.getMusic(); if (music.length > 0) this.renderMusic(音乐); } } 声明全局{ 接口 HTMLElementTagNameMap { “乐谱”：SheetMusic； } } 运行“npm run dev”，如果一切顺利，应该会出现以下内容： ## 结论如果您想了解有关使用 Lit 进行构建的更多信息，您可以阅读[此处]() 的文档。此示例的源代码可以在[此处]()找到。

点亮乐谱

包含技能