网页显示 :mad:_在网页上写乐谱：基础

网页显示 :mad:

The final project in my 1st year web development class is to design and develop a site to teach a skill. This semester, several students are creating sites with musical themes: how to play guitar, read sheet music, etc. That got me thinking: what’s the best way to create musical notation on a modern website?

我一年级网络开发课程的最后一个项目是设计和开发一个教授技能的网站。 这个学期，几个学生正在创建具有音乐主题的网站：如何弹吉他，阅读乐谱等。这让我开始思考：在现代网站上创建音乐符号的最佳方法是什么？

Most digital sheet music is delivered in a format that’s indistinguishable from the bound papers we remember from childhood lessons, only locked into PDFs. To present musical notation in an accessible, usable way on the web, we need to take a different approach.

大多数数字活页乐谱的传送格式与我们从童年课时记得的装订纸没有区别，只有锁定为PDF。 为了以一种可访问的，可用的方式在网络上呈现音乐符号，我们需要采用其他方法。

音乐人物 (Musical Characters)

Most developers don’t realise that there are dozens of musical symbols buried in most typefaces, easily accessible through codes or a glyph. While not enough to reproduce a complex score, these symbols are enough to render basic musical phrases on web pages.

大多数开发人员没有意识到，大多数字体中埋藏着许多音乐符号，可以通过代码或字形轻松访问。 这些符号虽然不足以再现复杂的乐谱，但足以在网页上呈现基本的乐句。

So long as you’re encoding your page in UTF-8, you should be able to simply copy and paste the glyphs directly into your markup:

只要您使用UTF-8编码页面，就应该能够简单地将字形直接复制并粘贴到您的标记中：

<li>♪</li>

You can take the same approach with CSS generated content:

您可以对CSS生成的内容采用相同的方法：

li:before { content: "♯"; }

For the sake of convenience, I’ve also included the decimal and hexadecimal entities for each glyph; these should be used if with JavaScript or in MySQL, as using Unicode characters can cause errors if they are inserted directly into MySQL feilds.

为了方便起见，我还为每个字形包含了十进制和十六进制实体 。 如果在JavaScript或MySQL中应使用这些字符，因为如果将Unicode字符直接插入MySQL字段，则使用它们会导致错误。

音符，乐谱，利器和谱号 (Notes, Flats, Sharps & Clefs)

HTML Entity	Hex Entity	Produces	Description
♩	\2669	♩	quarter note
♪	\266a	♪	eighth note
♫	\266b	♫	beamed eighth note
♬	\266c	♬	beamed sixteenth note
♭	\266f	♭	flat
♮	\2670	♮	natural
♯	\2671	♯	sharp
𝄪	\x1d12a	𝄪	double sharp
𝄫	\x1d12b;	𝄫	double flat
𝄞	\x1d11e;	𝄞	G clef
&#119073	\x1d121	𝄡	C clef
𝄢	\x1d122	𝄢	F clef

HTML实体	十六进制实体	产生	描述
＆＃9833;	\ 2669	♩	四分音符
＆＃9834;	\ 266a	♪	八分音符
＆＃9835;	\ 266b	♫	喜气洋洋的八分音符
＆＃9836;	\ 266c	♬	喜洋洋的十六分音符
＆＃9837;	\ 266f	♭	平面
＆＃9838;	\ 2670	♮	自然
＆＃9839;	\ 2671	♯	尖锐
＆＃119082;	\ x1d12a	𝄪	双尖
＆＃119083;	\ x1d12b;	𝄫	双层公寓
＆＃119070;	\ x1d11e;	𝄞	G谱号
＆＃119073	\ x1d121	𝄡	C谱号
＆＃119074;	\ x1d122	𝄢	谱号

暂停，条线，声级和重复 (Pauses, Bar Lines, Sound Levels & Repeats)

HTML Entity	Hex Entity	Produces	Description
𝄒	\2669	𝄒	breath mark
𝄐	\x1d110	𝄐	fermata
𝄑	\x1d111	𝄑	fermata below
𝆒	\x1d192	𝆒	crescendo
𝆓	\x1d193	𝆓	decrescendo
𝄀	\x1d100	𝄀	single bar line
𝄁	\x1d101	𝄁	double bar line
𝄂	\x1d102	𝄂	final bar line
𝄃	\x1d103	𝄃	reverse final bar line
𝄄	\x1d104	𝄄	dashed bar line
𝄅	\x1d105	𝄅	short bar line
𝄆	\x1d106	𝄆	left repeat
𝄇	\x1d107	𝄇	right repeat

HTML实体	十六进制实体	产生	描述
＆＃119058;	\ 2669	𝄒	呼吸痕
＆＃119056;	\ x1d110	𝄐	费马
＆＃119057;	\ x1d111	𝄑	下方的费马
＆＃119186;	\ x1d192	𝆒	渐强
＆＃119187;	\ x1d193	𝆓	递减
＆＃119040;	\ x1d100	𝄀	单杠线
＆＃119041;	\ x1d101	𝄁	双杠线
＆＃119042;	\ x1d102	𝄂	最后一条线
＆＃119043;	\ x1d103	𝄃	反转最后一条线
＆＃119044;	\ x1d104	𝄄	虚线条
＆＃119045;	\ x1d105	𝄅	短条线
＆＃119046;	\ x1d106	𝄆	左重复
＆＃119047;	\ x1d107	𝄇	正确的重复

You will tend to find better support for musical notation symbols on OS X than Windows, particularly in the six-digit decimal entity range. The basic symbols - quarter notes through to the sharp symbol - have good support across all platforms and browsers.

在OS X上，您会发现比Windows更好地支持音符符号 ，尤其是在六位数的十进制实体范围内。 基本符号-从四分音符到清​​晰的符号-在所有平台和浏览器中均具有良好的支持。

One significant advantage of using these entities is their built-in support for accessibility: many text-to-speech converters will read the quarter-note symbol as exactly that. However, their severe limitations across platforms mean that they can't be used for crafting realistic sheet music: you should probably consider these entities for decoration, rather than information.

使用这些实体的一个显着优势是它们对可访问性的内置支持：许多文本到语音转换器会准确地读取四分音符。 但是，它们跨平台的严格限制意味着它们不能用于制作逼真的活页乐谱：您应该考虑将这些实体用于装饰，而不是信息。

There are a few more music symbols that are common in typefaces (at least on the Mac side), but I’m going to assume that most readers aren’t interested in using mensural notation to represent medieval choral music.

字体中还有其他一些常见的音乐符号(至少在Mac方面如此)，但我将假定大多数读者对使用月经符号表示中世纪的合唱音乐不感兴趣。

翻译自: https://thenewcode.com/1005/Writing-Musical-Notation-on-Web-Pages-The-Basics

网页显示 :mad: