{"id":18717477,"url":"https://github.com/encaik/simple-notation","last_synced_at":"2026-03-16T01:37:14.465Z","repository":{"id":249079444,"uuid":"830444047","full_name":"Encaik/simple-notation","owner":"Encaik","description":"简谱渲染是一个基于TypeScript开发的简单音乐渲染库，可以让用户使用简单的文本配置来渲染简谱。","archived":false,"fork":false,"pushed_at":"2025-11-20T02:47:29.000Z","size":131740,"stargazers_count":36,"open_issues_count":4,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-20T04:17:51.434Z","etag":null,"topics":["music","score","simple-notation","typescript","vite"],"latest_commit_sha":null,"homepage":"https://simple-notation.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Encaik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-18T09:31:51.000Z","updated_at":"2025-11-20T02:47:32.000Z","dependencies_parsed_at":"2025-04-12T13:49:27.200Z","dependency_job_id":"c875ef60-c4c3-41d6-9eeb-50861a1769a6","html_url":"https://github.com/Encaik/simple-notation","commit_stats":null,"previous_names":["encaik/simple-notation"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/Encaik/simple-notation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fsimple-notation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fsimple-notation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fsimple-notation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fsimple-notation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Encaik","download_url":"https://codeload.github.com/Encaik/simple-notation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Encaik%2Fsimple-notation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30558176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-15T23:30:23.986Z","status":"ssl_error","status_checked_at":"2026-03-15T23:28:43.564Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["music","score","simple-notation","typescript","vite"],"created_at":"2024-11-07T13:16:21.856Z","updated_at":"2026-03-16T01:37:14.460Z","avatar_url":"https://github.com/Encaik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![banner](https://socialify.git.ci/Encaik/simple-notation/image?description=1\u0026font=Jost\u0026forks=1\u0026issues=1\u0026language=1\u0026name=1\u0026owner=1\u0026pattern=Diagonal+Stripes\u0026stargazers=1\u0026theme=Light)\n\n# 简谱渲染\n\n## 介绍\n\n这是一个基于 TypeScript 开发的动态简谱渲染库，用户仅需文本输入，即可在网页上生成优美的简谱。\n\n简谱应用:[https://simple-notation.vercel.app/](https://simple-notation.vercel.app/)\n\n国内访问:[https://www.s-n.xyz](www.s-n.xyz)\n(但加载速度可能仍然较慢)\n\n[![vercel deploy](https://vercelbadge.vercel.app/api/encaik/simple-notation)](https://simple-notation.vercel.app/)\n[![codecov](https://codecov.io/gh/Encaik/simple-notation/graph/badge.svg?token=eh8ngi0W2P)](https://codecov.io/gh/Encaik/simple-notation)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/ab49386d-76d8-492c-afa9-3c437f01a266/deploy-status)](https://app.netlify.com/projects/sage-kheer-b2bd9f/deploys)\n\n## 界面展示\n\n![preview](/doc/img/preview.png)\n\n## 使用方法\n\n[![npm version](https://badge.fury.io/js/simple-notation.svg)](https://badge.fury.io/js/simple-notation)\n\n### 1. 引入方式\n\n#### 浏览器直接引入\n\n1. ESM方式\n\n将 `dist/simple-notation.js` 和 `dist/style.css` 拷贝到你的项目，并在 HTML 中引入：\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\"\u003e\n    import { SimpleNotation } from './simple-notation.js';\n    import './style.css';\n    const container = document.getElementById('container');\n    const sn = new SimpleNotation(app, {\n      resize: true,\n      debug: true,\n    });\n    sn.loadData(...);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n2. UMD方式\n\n将 `dist/simple-notation.umd.js` 和 `dist/style.css` 拷贝到你的项目，并在 HTML 中引入：\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"./style.css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"container\"\u003e\u003c/div\u003e\n  \u003cscript src=\"./simple-notation.umd.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    const container = document.getElementById('container');\n    const sn = new SN.SimpleNotation(container, {\n\n    })\n    sn.loadData(...);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n#### npm 包引入\n\n```bash\nnpm install simple-notation\n```\n\n1. ESM方式\n\n```js\nimport { SimpleNotation } from 'simple-notation';\nimport 'simple-notation/dist/style.css';\n\nconst container = document.getElementById('container');\nconst sn = new SimpleNotation(container, { debug: true });\nsn.loadData(...);\n```\n\n2. UMD方式\n\n```js\nconst SN = require('simple-notation');\nimport'simple-notation/dist/style.css';\nconst container = document.getElementById('container');\nconst sn = new SN.SimpleNotation(container, { debug: true });\nsn.loadData(...);\n```\n\n### 2. 加载数据\n\n```js\nsn.loadData({\n  info: {\n    title: '小星星',\n    composer: 'Mozart, W.A.',\n    lyricist: '佚名',\n    time: '4',\n    tempo: '88',\n    key: 'C',\n    beat: '4',\n  },\n  score: `1,1,5,5|6,6,5,-|4,4,3,3\n2,2,1,-|5,5,4,4|3,3,2,-\n5,5,4,4|3,3,2,-|1,1,5,5\n6,6,5,-|4,4,3,3|2,2,1,-`,\n  lyric: `一闪一闪亮晶晶-\n满天都是小星星-\n挂在天空放光明-\n好像千颗小眼睛-\n一闪一闪亮晶晶-\n满天都是小星星`,\n});\n```\n\n### 3. 播放控制\n\n`simple-notation` 提供了独立的播放器类 `SNPlayer`，可用于简谱的自动播放、暂停、继续、停止等操作，并支持光标联动。\n\n```js\nimport { SNPlayer } from 'simple-notation';\n\n// 需在 sn.loadData 后创建播放器实例\nconst player = new SNPlayer();\n\n// 播放\nplayer.play();\n\n// 暂停\nplayer.pause();\n\n// 继续\nplayer.resume();\n\n// 停止\nplayer.stop();\n\n// 播放结束回调\nplayer.onEnd(() =\u003e {\n  console.log('播放结束');\n});\n\n// 实际发声回调（非'-'音符）\nplayer.onNotePlay((note, duration) =\u003e {\n  // 可在此处集成 WebAudio 或 MIDI 播放\n  console.log('播放音符', note, '时长', duration);\n});\n\n// 光标移动回调（每个音符都会触发，包括'-'）\nplayer.onPointerMove((note) =\u003e {\n  // 可用于自定义高亮\n  console.log('光标移动到', note);\n});\n```\n\n### 4. 光标层控制\n\n播放器会自动联动光标层（高亮当前播放音符）。如需手动控制光标，可使用 `SNPointerLayer`：\n\n```js\nimport { SNPointerLayer } from 'simple-notation';\n\n// 显示/移动光标到指定音符\nSNPointerLayer.showPointer('note-1', sn.el);\n\n// 隐藏光标\nSNPointerLayer.clearPointer();\n```\n\n\u003e **注：** `note-1` 为 SVG 元素的 `sn-tag` 属性值，通常可通过回调参数中的 `note.tag` 获取。\n\n### 5. 其他说明\n\n- 支持自动响应容器大小变化（`resize: true`）。\n- 支持调试模式（`debug: true`），会输出详细日志。\n- 支持 ABC 记谱法（开发中）。\n\n如需更详细的 API 说明和高级用法，请参考源码中的 JSDoc 注释和 `examples/` 目录下的实际用例。\n\n## 乐器采样支持\n\n本项目的乐器音源来自 [nbrosowsky/tonejs-instruments](https://github.com/nbrosowsky/tonejs-instruments) 仓库，根据 [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/) 许可证授权使用。\n\n## 名字解释\n\n- simple notation : 简谱\n- score : 整个乐谱\n- stave : 一行乐谱，可包含多个小节\n- measure : 小节\n\n更具体的可以参考此链接：[音乐术语中英对照](https://www.cnblogs.com/Stareven233/p/15755596.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencaik%2Fsimple-notation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fencaik%2Fsimple-notation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencaik%2Fsimple-notation/lists"}