系统设计
- 文献综述 -
由于我们的重点是教育互动，我们开始了一个涉及音乐相关的输入和输出的设计过程，首先进行了与设计相关的文献综述。我们调查了人机交互、计算机科学和心理学领域，以寻找能够阐明这种应用在教育中的一些益处或风险的来源。
首先，我们调查了将教育游戏化的潜在益处。与按钮和数字键盘以及音乐小节等数字化条形图进行互动有助于孩子们在头脑中保持同一音乐概念的多种表现形式，这是发展符号思维所需的技能[1]。正如李和哈默指出的，游戏化的本质允许“在面对失败时保持韧性，将失败重新定义为学习的必要部分…学生反过来可以学会将失败视为机会，而不是变得无助、恐惧或不知所措”[2]。在我们的经验背景下，学习音乐可能涉及许多错误——通过实践，学生可以磨练自己的技能，但对一些学生来说，失败可能会感到不堪重负。因此，游戏化可以帮助学生保持对学习的积极性。
至于在音乐创作/教育中使用非标准硬件输入，一些关于人机交互在音乐学习中的应用的学术研究也发现了与此相关的好处。贝维拉夸等人发现，在测试一个用于“指挥”音乐的无线传感器界面的实验中，“学生对实验非常感兴趣…… [并]立即指出其创造性潜力”[3]。研究还发现，教师还促进了学生对诸如音乐乐句等概念的理解的提高。
教育工作者特别注意到这种方法在音乐教育中的潜在益处。在Sökezoğlu等人的研究中[4]，当对音乐教育工作者就他们对基于Arduino的触摸音乐盒工具的看法进行访谈时，该工具可以定制用于各种音乐输出，他们指出硬件的潜力可以让学生创造自己的学习风格，可能是以类似游戏的方式，并且还可以“看到”和“应用”音乐的抽象概念。
心理学和神经科学的许多研究也表明，运动记忆和音乐记忆涉及类似的神经机制和认知过程。例如，运动记忆和音乐记忆都涉及到大脑皮层和基底神经节区域的活动，特别是在运动和听觉区域。此外，运动记忆和音乐记忆都需要对时间的感知和节奏的感知，因为精确的时间和协调对于演奏乐器或进行体能动作都是必要的[5, 6, 7, 8]。因此，在教育的早期阶段，引入多种感官记忆可以帮助学生更好地理解和掌握相互关联的概念。
系统设计
- 用户故事和需求 -
确认了游戏化和直观的动作输入可以提高学生的学习过程后，我们开始规划如何执行我们的教育音乐游戏的想法，首先参考了Hartson和Pyla在《UX设计书》[9]中概述的UX设计过程。由于我们的一般重点已经确定，我们处于UX设计生命周期的阶段，需要了解我们用户的工作和需求。
首先，我们每个人都考虑了谁会想要使用或从这种体验中受益，并聚集在一起创建了一个用户故事，描述了代表性用户的最小可行产品或所需功能的最小单元。然后，根据Hartson和Pyla的UX设计指南，我们根据这个描述推导出了一些用户需求。附录B中包含了描述我们最初想法的草图。在年幼时学习弹奏乐器和阅读音乐是一个很好的机会，但它也可能乏味，甚至是困难和令人困惑的。从音乐的可听声音跨越到它在页面上的抽象表示对任何人来说都是一个很大的飞跃，特别是对于儿童来说。在课堂或个人环境中，我们小组构思的体验理想情况下可以由年轻人自由演奏和创作音乐，同时看到音乐是如何被可视化的，无论是作为跟随旋律的弧线还是作为乐谱上的音符，帮助弥合这种差距。
有了这个用户在心中，团队定义了以下用户需求，这些需求可以进一步发展成最终体验的功能。
演奏音乐
用户应该能够使用某种输入设备来“演奏”音乐。用户输入应附带相应的音频输出。
可视化音乐
用户播放的音乐应以某种格式直观地显示。
重播音乐
用户播放的音乐应该能够播放并再次收听，最好是相应的视觉表现。
游戏化
鉴于目标受众是正在学习演奏乐器和/或阅读音乐的年轻人或儿童，游戏化的元素可以通过使其令人愉快来增强教育过程。
竞争，或合作游戏
为了加强学习成果，可以添加涉及其他用户的协作或竞争元素。
为了满足这些需求，小组考虑了为实际操作提供的每个硬件和软件选择。对于体验的视觉元素，我们考虑使用LED灯来表示音乐的声波形，但由于我们尚未决定最终的视觉方向，并且希望选择一种能够灵活适用于任何想法的东西，因此团队选择使用p5来实现体验的软件部分，在计算机屏幕上显示视觉效果。
在同样的思路下，小组还考虑了他们应该使用哪些硬件选项来进行用户输入和输出。我们的理论用户是一个刚开始学习音乐的年轻人，因此可以假设他们还不知道如何弹奏乐器。在这种情况下，小组认为一种抽象的输入方法，而不是某种具体乐器的再现，对于年轻用户来说可能更好，也可能更容易被不同能力水平的用户接受。这使得小组选择了微软Kinect，它允许用户进行更大规模的身体运动来进行输入。他们还选择了请求一个Arduino Uno作为另一种输入方法，可能带有按键。通过使用这两种硬件输入，之前在规划过程中考虑过的合作/竞争元素有望以动态和有趣的方式实现。
功能设计和实现
- 总体构架 -
在硬件和软件选择确定后，小组开始设计体验的细节。这包括明确它的工作方式、外观以及体验的流程。我们的目标是开发一个用于音乐教育目的的游戏系统，提供早期的音符识别。为了模拟真实钢琴键的输入，我们决定使用Arduino构建一个简单的电子钢琴，允许输入八个基本音符。
此外，我们决定使用Kinect作为一种动作控制形式，允许根据用户右手的高度和手势来演奏音符。作为一个核心组件，我们决定采用基于p5.js的草图[10]，其中两个输入将根据需要进行查询，以便提供视觉反馈，并计算两个来源的输入之间的差异。
有了所有这些，我们现在对我们系统的基本架构有了一个很好的想法（如图1所示），这使我们能够着手设计和设计各个子组件。在这个过程中，我们考虑了多个由唐·诺曼（Don Norman）[11]和本·施奈德曼（Ben Shneiderman）的界面设计黄金法则[12]所倡导的标准交互设计准则，以做出明智的设计决策，从而促进引人入胜的用户体验。
功能设计和实现
- 软件 -
作为整个系统的核心视觉界面，我们在设计p5 Web界面和底层代码结构时考虑了很多用户体验设计，以促进用户获得有意义的体验。
在代码层次上，游戏的流程由一个名为gamePhase的单一变量控制，该变量在每个draw ( ) 迭代中进行检查，以确定在画布上绘制什么类型的屏幕——该变量在游戏内部的关键事件/转换期间进行更新。这使得代码库的模块化增强，使得能够为每个阶段屏幕编写单独的方法（例如drawMenu ( )，drawOptions ( )），同时确保各个阶段在绘制方面相互隔离，通过一个switch case语句进行绘制。此外，由于原始的HTML元素也与p5画布一起创建，处理这些元素的可见性也非常重要。主要的做法是将每个屏幕UI分成单独的div，并根据需要设置显示属性，以确保一次只显示一个UI。
从人机交互的角度来看，这有助于确保屏幕上不会被屏幕外元素干扰——屏幕上只会包含操作相关的按钮。当然，在讨论用户界面时，另一个重要因素是界面组件的整体视觉设计。考虑到该工具的教育性质，我们选择遵循诺曼的可见性设计原则，采用简约而极简的设计，UI中的菜单按钮采用一致的、质朴的美感，使用明亮且高度可见的颜色和圆角。按钮内的文本也被设计为简短、简单、直接，以避免给潜在用户造成负担。此外，保持UI的美学特点将有助于美学可用性效应，甚至可能进一步提升游戏的参与度。
接下来，p5实现的另一个关键组成部分是输入处理。考虑到缺乏重复输入传感器，最初的草图利用鼠标作为主要的导航设备。随着系统的发展，其他输入传感器被构建成通过分派鼠标事件来作为鼠标的替代方法。因此，用户能够以类似的方式使用多种输入方法，增加了用户的控制和自由度。类似地，游戏内实现了选项菜单，通过自定义受限选项，如节奏或是否显示帮助文本，进一步促进了用户自由的概念。草图中的导航也以独特的方式处理，仅通过Kinect或鼠标完成。由于已经注意到Kinect在运动方面不如鼠标可靠[14]，因此决定用户可以通过悬停在按钮上一段时间来选择它，或者通过握紧拳头来点击它。通过这种方式，有经验的用户可以使用点击的快捷方式，而新手用户则可以通过在悬停在按钮上时周围的外圆弧填充提供的信息反馈直观地学习如何导航屏幕。
在任何游戏开始之前，用户将提供一个教程屏幕，详细说明游戏的流程，作为可提供的最接近的文档形式。这个教程可以选择关闭，在选项中关闭，这样专家用户就不需要反复看到相同的屏幕。在核心游戏界面中，用户将看到一个有五线谱和高音谱号的界面——这些熟悉的符号将利用用户的识记能力。随着时间的推移，一条线将水平地在五线谱上移动8拍，用户可以弹奏音符以添加到当前位置的五线谱上，这是一种直观的映射，说明了乐谱的演奏方式（从左到右）。此外，如果使用Kinect作为输入，还会显示可能播放的音符，以通知并帮助用户知道会发生什么。
除了显示Kinect的潜在音符外，实时在画布上绘制正在播放的音符，以识别来自任何来源的输入（如果是该来源的轮次），以向用户提供信息反馈。这与p5.sound库[15]播放音符的同步进行。采用了包络来播放音符，通过定义攻击和释放速度来减少基本正弦振荡器的机器声音特性，从而促进更愉悦的体验。
一旦一个旋律被录制下来，用户会被引导到所谓的“重试”屏幕。从这里，他们可以重新录制自己的旋律，这个功能允许轻松地撤销用户的错误操作。另外，用户也可以播放录制的旋律，以获取关于游戏当前状态的进一步信息反馈。最后，在菜单中的最后一个选项允许用户将录制的旋律作为第二位玩家需要匹配的旋律。另外，值得一提的是，在录制旋律的阶段（无论是为了匹配先前的旋律还是创建新的旋律），都实现了一个短暂的准备倒计时。主要目的是减轻用户的压力，并为他们提供时间适应新的游戏状态，以减少他们在播放音符之前的认知负荷。接下来，在两位用户都完成了他们的录制阶段后，准确度得分等绩效反馈将被计算并绘制到屏幕上。这标志着游戏的结束，因此包括指示结束的文本（“谢谢参与！”）和一个返回主菜单的按钮。最后，还应该注意到游戏中有一些限制条件，比如将旋律长度限制为两小节，只允许音符C4-E5。这是一个有意识的决定，根据诺曼的指导方针，将硬件的限制（尺寸和功耗）转化为软件的优势。
功能设计和实现
- 硬件 Arduino -
鉴于Arduino作为替代乐器的潜力，我们决定将其构建为基于按钮的钢琴模拟器。最初，八个按钮通过串联电路连接到A0引脚。通过这种方式，Arduino可以通过检测电压值确定哪个按钮被按下，并通过电压变化确定持续时间，从而提供了作为p5草图所需的音符和持续时间方面的理想输入。
为了将Arduino连接到p5，我们同时使用了p5.serialport库[16]和p5.serialcontrol应用程序[17]。由于浏览器限制了运行草图时p5直接访问串行端口的能力，p5.serialcontrol通过WebSocket实现了这种连接，如图2所示。通过这种方式，Arduino和p5草图可以有效地进行通信，使得音符按键可以记录并显示在草图窗口上。
尽管在p5上绘制音符以进行输入反馈对于观看屏幕的用户来说是直观的，但可能不够及时，因为它需要将注意力从Arduino转移到计算机屏幕上——而反馈的时机被认为是非常重要的[18]。此外，已经证明，在任务执行过程中，即时反馈对于立即纠正错误更为有效[19]。
因此，决定将LED添加到Arduino的面包板上，作为一种更直接的视觉反馈形式，从而能够更快速地验证输入的错误。在开发过程中，我们讨论了几种替代这种直接反馈的方法。在采用LED的想法之前，我们考虑了根据手势输入使按钮自动跳动，但由于按钮的尺寸，键盘的跳动不如LED直观。根据菲茨定律[20]，变化的间隔和大小会影响人们对对象的感知和判断。LED的亮度变化具有更小、更明显的间隔，相比于微妙和延迟的机械变化，更容易被注意到，并且实现起来也更加简单。通过使用发光LED，反馈的可见性得到了增强，同时向用户指示信号是否已输入，从而提高了系统的可控性。LED的颜色也与按键音符保持一致，使用户更容易理解和预测系统的运行。因此，LED使得反馈及时、清晰、显眼且易于理解。
除了Arduino向p5提供输入外，它还用于在第一个玩家录制旋律后重新播放旋律时处理输出。这主要是为了在游戏的关键点保持通过LED的视觉反馈一致，因为Kinect或Arduino可以是玩家1，因此重新播放旋律应该为两个玩家提供反馈。为了实现这一点，p5将音符和持续时间发送到Arduino，Arduino将点亮相应的LED以显示该时间。
功能设计和实现
- 硬件 Kinect -
其次，选择用于该系统的另一个输入设备是微软Kinect，它可以捕捉身体动作。决定将这种动作映射到屏幕上的x和y坐标，作为一个指针模拟，因为这是一种自然的动作映射，已知可以促进更加引人入胜的用户体验[21]。
在物理实施方面，在最终集成之前，进行了几次迭代。首先，尝试了一种相当琐碎的方法，通过KinectMouseControlV2软件[22]让Kinect充当鼠标指针的替代品，这与已经建立好的接受鼠标输入的p5草图很好地配合。然而，很快就注意到，该软件在识别手势方面并不是非常可靠，而且它还通过串行通信，限制了Arduino和Kinect连接到核心笔记本电脑，这在空间上造成了相当大的混乱。
因此，采取了基于Web服务器的方法——这将允许对Kinect输出进行精细控制，并消除了Kinect必须与p5草图和Arduino处于同一房间/位置的限制。这得益于Kinectron软件[23]，它自动化了设置和向任何连接的客户端广播Kinect输入的过程。通过这种方式，p5草图可以通过Web套接字连接到Kinect，并在每次接收到运动信息时定义一个回调函数（trackSkeleton( )）。
使用提供的信息来控制鼠标光标是一个简单的过程，只需更新mouseX和mouseY变量。在测试过程中注意到，Kinect返回的手部坐标可能会有些棘手，因此在回调函数中进行了一些简单的平滑计算，以减少光标的不稳定移动，以帮助用户的内在控制中心。
就鼠标事件（例如单击和悬停）而言，这是通过对从Kinectron Web服务器传递的rightHandState变量进行检查来简单处理的。通过这种方式，可以基于用户的右手是否握拳或打开来分派鼠标事件，实现单击和释放。
此外，为了悬停导航，使用了一个变量来不断存储手当前悬停的元素。如果这个变化了，一个mouseover事件将被分派给新元素，而一个mouseout事件将被分派给上一个元素——使得实现的悬停功能可以与Kinect无缝配合工作。
评估
就整体用户体验而言，该游戏提供了深度沉浸，同时涉及多种感官，如听觉、触觉和视觉。用户需要协调眼睛和手，增强了动力和专注力，结果是一个吸引人的体验。尽管涉及多种感官，但游戏仍然用户友好，只需要简单的操作即可成功游玩。
在设计方面，所有用户故事中概述的用户需求都得到了满足。游戏旨在教授孩子们基本的音乐概念，并培养对音乐和乐器的兴趣。通过生动的网页、类似键盘的按钮、明亮的LED和运动捕捉设备，这一目标得以实现。
然而，系统还有改进的空间。观察到的一个问题是Kinect导航时偶尔出现光标不稳定。尽管已实现了平滑功能，但可以进一步改进，可能通过Kinect Studio的VisualGesture Builder。此外，为不同身高的用户手动调整Kinect位置可能需要通过选项菜单中的校准阶段来解决。
在硬件方面，Arduino有效地模拟了传统钢琴，但可能需要改进同时按下按钮的处理。目前，较低的电压优先，可能会覆盖左侧的按钮。将单独的引脚分配给UNO Mega等较大的微控制器上的按钮可能会解决这个问题。
总的来说，实施的系统满足了用户故事的要求，提供了一个引人入胜的用户体验。
结论
最终，虽然目前仅是一个概念验证阶段，但我们相信我们已经成功打造了一个动态、互动和教育性的体验，可以帮助学生提高音乐技能，并让他们与他人一起享受游戏。
在过去的几周里，我们能够运用人机交互方法来充分考虑我们的潜在用例，并设计出一个能够产生有意义体验的系统。我们的最终软件展示了一个创新地结合和利用两个硬件输入源的原型，设计决策基于现有文献和系统进行了合理解释。
虽然还有一些小的改进空间，但与系统的交互是流畅和直观的，并以逻辑方式操纵内容。通过这一点，我们相信我们已经构建了一个可以在教育领域中作为工具来增强学生的记忆和音乐才能，以及他们的自然映射能力的系统——这是通过心理学领域的现有研究得到合理证明的。游戏中的竞争元素还可以增加重复游玩的动力，从而可能产生更好的学习成果。
未来工作/扩展
01
2人Kinect模式
目前我们使用Kinect的方式要求摄像头只能拍摄到一个人，否则它可能会感到困惑，用户输入会变得不稳定。如果我们要为体验添加一个完整的双人模式，我们可以计划这种输入方式，并校准和编程Kinect来利用其骨架识别功能来捕捉两个玩家的动作。这可以启用各种新的竞争性或合作性模式。
02
可变声音输出
目前，游戏配置为在用户输入时通过浏览器播放对应于音乐音调的频率，而音乐的音调听起来有些人工。可以修改输出，使用外部声音文件播放真实乐器的声音，并且用户在玩游戏时可能可以选择他们想听到的乐器。
03
玩预先录制的音乐曲目
目前，游戏完全基于用户输入，但可以修改为引入并播放预先录制的外部音乐文件，并提示用户用他们的输入来匹配音乐。这可能会提升单人游戏体验，并增加长期使用游戏练习的兴趣。
04
保存录制的旋律
在完成游戏循环后，游戏可以将用户的输入保存为mp4文件，以便玩家或老师需要时进行回放和分析。
05
可变旋律长度
目前游戏只允许录制两小节的音乐，打印的音符只是简单的点。为了实现更高级的曲谱创作、音乐练习和游戏玩法，我们可以允许用户自由配置游戏周期的长度，将录制扩展到所需的时间长度。
06
远距离竞技比赛
Kinectron具有通过公共地址广播Kinect数据的功能，这使得Kinect可以完全位于与p5和Arduino不同的位置。p5还可以通过跨画板通信的功能实现两个位于不同国家的玩家相互玩耍。
07
更多音符/降音/升音
目前，我们只允许C4-C5音阶范围内的音符，再加上一些更高音的音符，但游戏可以修改为包括任何类型的输入，包括全音阶范围和半音/升音音符。
参考文献
[1] DeLoache, J. S. (1987). Rapid Change in the Symbolic Functioning of Very Young Children. In Science (Vol. 238, Issue 4833, pp. 1556–1557). American Association for the Advancement of Science (AAAS). doi: https://doi.org/10.1126/science.2446392
[2] Zeybek, N., & Saygı, E. (2023). Gamification in Education: Why, Where, When, and How?—A Systematic Review. Games and Culture, 0(0). doi: https://doi.org/10.1177/15554120231158625
[3] Bevilacqua, F., Guédy, F., Schnell, N., Fléty, E., & Leroy, N. (2007). Wireless sensor interface and gesture-follower for music pedagogy. In Proceedings of the 7th international conference on New interfaces for musical expression - NIME ’07. the 7th international conference. ACM Press. doi: https://doi.org/10.1145/1279740.1279762
[4] Sökezoğlu Atılgan, D., & Gürman, Ü. (2020). Material Design in Music Education Using Arduino Platform. In Journal of Qualitative Research in Education (Vol. 8, Issue 4, pp. 1–26). Ani Publishing and Consulting Company. doi: https://doi.org/10.14689/issn.2148-2624.8c.4s.14m
[5] Starr, A., & Phillips, L. (1970). Verbal and motor memory in the amnestic syndrome. In Neuropsychologia (Vol. 8, Issue 1, pp. 75–88). doi: https://doi.org/10.1016/0028-3932(70)90027-8
[6] Imreh, G., & Chaffin, R. (1997). Understanding and developing musical memory: The views of a concert pianist and a cognitive psychologist. The American Music Teacher, 46(3), 20-24.
[7] Grahn, J. A., & Brett, M. (2007). Rhythm and Beat Perception in Motor Areas of the Brain. In Journal of Cognitive Neuroscience (Vol. 19, Issue 5, pp. 893–906). MIT Press - Journals. doi: https://doi.org/10.1162/jocn.2007.19.5.893
[8] Janata, P. (2015). Neural basis of music perception. In The Human Auditory System - Fundamental Organization and Clinical Disorders (pp. 187–205).
[9] Hartson, H. R., & Pyla, P. S. (2019). The UX Book: Agile UX design for a quality user experience.
[10] McCarthy, L.L. and The Processing Foundation (2022). p5.js. url: https://p5js.org/
[11] Norman, D. A. (2013b). The Design of Everyday Things. doi: https://doi.org/10.5555/2187809
[12] Shneiderman, B. (1987). Designing the user interface strategies for effective human-computer interaction. In ACM SIGBIO Newsletter (Vol. 9, Issue 1, p. 6). Association for Computing Machinery (ACM) doi: https://doi.org/10.1145/25065.950626.
[13] Pino, A., Tzemis, E., Ioannou, N., Kouroupetroglou, G. (2013). Using Kinect for 2D and 3D Pointing Tasks: Performance Evaluation. In: Kurosu, M. (eds) Human-Computer Interaction. Interaction modalities and Techniques. HCI 2013. Lecture Notes in Computer Science, vol 8007. Springer, Berlin, Heidelberg. doi: https://doi.org/10.1007/978-3-642-39330-3_38
[14] Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability. In Conference companion on Human factors in computing systems – CHI ’95. Conference companion. ACM Press. doi: https://doi.org/10.1145/223355.223680
[15] Sigal, J. (2021). p5.sound. url: https://github.com/processing/p5.js-sound
[16] Montoya-Moraga, A. & Endoh, K. (2022). p5.serialport. url: https://github.com/p5- serial/p5.serialport
[17] Montoya-Moraga, A. & Van Every, S. (2021). p5.serialserver. url: https://github.com/p5- serial/p5.serialserver
[18] Hattie, J., & Timperley, H. (2007). The power of feedback. Review of educational research, 77(1), 81-112. doi: https://doi.org/10.3102/003465430298487
[19] Clariana, R.B., Wagner, D. & Roher Murphy, L.C. Applying a connectionist description of feedback timing. ETR&D 48, 5–22 (2000). doi: https://doi.org/10.1007/BF02319855
[20] Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. In Journal of Experimental Psychology (Vol. 47, Issue 6, pp. 381–391). American Psychological Association (APA). doi: https://doi.org/10.1037/h0055392 [21] McEwan, M. W., Blackler, A. L., Johnson, D. M., & Wyeth, P. A. (2014). Natural mapping and intuitive interaction in videogames. In Proceedings of the first ACM SIGCHI annual symposium on Computerhuman interaction in play. CHI PLAY ’14: The annual symposium on Computer-Human Interaction in Play. ACM. https://doi.org/10.1145/2658537.2658541
[22] Chen, J. (2018). KinectV2MouseControl. url: https://github.com/TangoChen/KinectV2MouseControl
[23] Jamhoury, L. & Van Every, S. (2021). Kinectron. url: https://github.com/kinectron/kinectron