基于HTML5和JS实现的在线电子钢琴网页版

1 引言

1.1 项目背景

为了体验软件工程各阶段的主要工作，熟悉项目开发流程，在HTML5标准发布已久的背景下，基于HTML5增加的新特性，设计一个网页版的电子钢琴，来实现上述目的。

1.2 目的

该需求规格说明书是针对本次软件工程课程设计编写，编写需求规格说明书的目的是为了对未来网站的需求做一个规范的描述。

该需求规格说明书对功能需求、性能需求和其它非功能性需求进行了详细的描述，详尽说明了这一软件产品的需求和规格，这些规格说明是进行设计的基础，也是编写测试用例和进行系统测试的主要依据。同时，该文档也是用户确定软件功能需求的主要依据。

1.3 读者对象

本需求规格说明书的读者对象为该网站的开发人员，课设验收老师。

1.4 定义

1.4.1 HTML5(HyperText Markuplanguage5)

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五重大修改。

1.4.2 CSS

它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。

1.4.3 Js

js即 Javascript ，是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

1.5 项目环境

开发语言：HTML5+CSS3+JavaScript。

运行环境：IE 9以上、Firefox 10以上、Chrome 17以上

2 需求分析

2.1 基本构造

可供点击的8个独立白键，5个黑键。能够使用特定键盘按键点击，并且钢琴上的键可对应键盘上多个按键

操作对应琴键时，显示动画效果，并伴有音效

2.2 需求概述

本项目旨在开发一个基于网页的模拟钢琴，以供用户平时休闲娱乐使用。本系统采用B/S模式，联合运用HTML5、CSS3和JavaScript多种典型网页设计技术完成系统，并且兼容了当前市场上主流的大多数浏览器。

用户打开网页后，可以直接得到模拟钢琴，并可以使用键盘进行弹奏,也可使用鼠标点击相应模拟琴键进行弹奏。

基于网页的模拟钢琴主要需求如下：

键盘弹奏功能：用相应的键盘按键模拟钢琴黑白键，点击按键，相应的模拟琴键颜色变化并发出相应的音调，然后琴键颜色恢复

鼠标弹奏功能：用鼠标点击网页中模拟琴键，模拟琴键颜色变深并发出相应的音调，然后琴键颜色恢复

2.3 整体细节

琴键上显示键盘操作提示，白键显示在下方，黑键显示在上方

网页下方显示操作提示

网页使用动态背景，增加美观程度

点击下载源码