基于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 整体细节

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

网页下方显示操作提示

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

点击下载源码

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

基于 C# 和 js 开发的程序员升职记 remake 版
基于 C# 和 js 开发的程序员升职记 remake 版截图视频开发中用到的知识项目地址相关项目 Demo 截图视频基于C#和js的程序员升职记remake版开发中用到的知识 vue ...
电子木鱼网页版(教学+源码带注释)
近日在网上经常看见电子木鱼的案例,但都是做的小程序,本人就突发奇想,使用css和JavaScript在网页中实现这个功能.于是便有了这个文章.有细致的讲解,也把源码都放在了最后,没有耐心的小伙伴可以直 ...
在线一键生成网页版 Nginx 配置文件
1 在线一键生成网页版 Nginx 配置文件介绍 NginxWebUI是一款方便实用的 nginx 网页配置工具,可以使用 WebUI 配置 Nginx 的各项功能,包括端口转发,反向代理,ssl ...
jQuery之键盘按键电子钢琴-----简洁版
jQuery之键盘按键电子钢琴-简洁版通过按键a,s,d,f,g,h,j,k,l分别对应九个不同的音调,按下按键对应的音频即可播放,可以自己弹出自己喜欢的歌曲代码` <!DOCTYPE ht ...
在线教育系统网页版，观看视频直播功能更多，更适合用户学习
与传统教育相比,线上教育是一种更符合如今社会大背景的教育模式,在强大的互联网技术的支撑下,让教育与学习突破时间与空间的限制,更具开放性.交互性.自主性的优势,且根据系统平台的不同功能,又能实现教育的异 ...
找到了！2个在线版本的网页版 PS ！
官方出了一个在线网页版的 PS,但是仅限加拿大地区使用.不过还有两个在线版本的网页版 PS :Photopea 和即时设计,都是可以在线使用的设计工具,功能上能完成大多数 PS 的常用能力.所以我们就 ...
IoT SOL：基于HTML5+Node.js的图形化、社区化开发平台
英特尔物联网服务融合开发套件(IoT SOL)是软件与服务事业部系统技术和优化部门(STO)开发的一款面向物联网开发的图形编程工具,旨在降低IoT应用的开发门槛.在2016年英特尔信息技术峰会(IDF ...
基于Java+HTML5+Node.js的自助餐厅管理系统（客户版＋商家版）
文档+任务书+选题表+开题报告+文献综述+外文翻译及原文+项目源码及数据库文件摘要随着智能移动设备的普及,移动互联网在生活中的重要性越来越明显,为了适应快速发展的Web技术以及不断提出的移动Web ...
基于HTML5和JS实现的切水果游戏
切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...
（转）【最新】抖音相关工具合集--在线观看，网页版，去水印下载视频，下载音乐，音乐榜单等
抖音去水印:https://welltool.net 这个工具除了支持单视频去水印,还支持用户发过的视频,抖音话题视频列表,使用音乐发过的视频列表批量下载除了下载无水印视频,还是支持下载背景音,视频 ...

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

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

最新文章

热门文章