CN107329660A - 一种钢琴类网络虚拟乐器 - Google Patents
一种钢琴类网络虚拟乐器 Download PDFInfo
- Publication number
- CN107329660A CN107329660A CN201710534923.9A CN201710534923A CN107329660A CN 107329660 A CN107329660 A CN 107329660A CN 201710534923 A CN201710534923 A CN 201710534923A CN 107329660 A CN107329660 A CN 107329660A
- Authority
- CN
- China
- Prior art keywords
- key
- piano
- virtual
- pressed
- newly
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0489—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using dedicated keyboard keys or combinations thereof
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/16—Sound input; Sound output
- G06F3/165—Management of the audio stream, e.g. setting of volume, audio stream path
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G10—MUSICAL INSTRUMENTS; ACOUSTICS
- G10H—ELECTROPHONIC MUSICAL INSTRUMENTS; INSTRUMENTS IN WHICH THE TONES ARE GENERATED BY ELECTROMECHANICAL MEANS OR ELECTRONIC GENERATORS, OR IN WHICH THE TONES ARE SYNTHESISED FROM A DATA STORE
- G10H1/00—Details of electrophonic musical instruments
- G10H1/0008—Associated control or indicating means
-
- G—PHYSICS
- G10—MUSICAL INSTRUMENTS; ACOUSTICS
- G10H—ELECTROPHONIC MUSICAL INSTRUMENTS; INSTRUMENTS IN WHICH THE TONES ARE GENERATED BY ELECTROMECHANICAL MEANS OR ELECTRONIC GENERATORS, OR IN WHICH THE TONES ARE SYNTHESISED FROM A DATA STORE
- G10H1/00—Details of electrophonic musical instruments
- G10H1/0033—Recording/reproducing or transmission of music for electrophonic musical instruments
-
- G—PHYSICS
- G10—MUSICAL INSTRUMENTS; ACOUSTICS
- G10H—ELECTROPHONIC MUSICAL INSTRUMENTS; INSTRUMENTS IN WHICH THE TONES ARE GENERATED BY ELECTROMECHANICAL MEANS OR ELECTRONIC GENERATORS, OR IN WHICH THE TONES ARE SYNTHESISED FROM A DATA STORE
- G10H1/00—Details of electrophonic musical instruments
- G10H1/32—Constructional details
- G10H1/34—Switch arrangements, e.g. keyboards or mechanical switches specially adapted for electrophonic musical instruments
-
- G—PHYSICS
- G10—MUSICAL INSTRUMENTS; ACOUSTICS
- G10H—ELECTROPHONIC MUSICAL INSTRUMENTS; INSTRUMENTS IN WHICH THE TONES ARE GENERATED BY ELECTROMECHANICAL MEANS OR ELECTRONIC GENERATORS, OR IN WHICH THE TONES ARE SYNTHESISED FROM A DATA STORE
- G10H7/00—Instruments in which the tones are synthesised from a data store, e.g. computer organs
- G10H7/002—Instruments in which the tones are synthesised from a data store, e.g. computer organs using a common processing for different operations or calculations, and a set of microinstructions (programme) to control the sequence thereof
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Multimedia (AREA)
- General Physics & Mathematics (AREA)
- Acoustics & Sound (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- General Health & Medical Sciences (AREA)
- Electrophonic Musical Instruments (AREA)
Abstract
本发明属于互联网技术领域,具体涉及一种钢琴类网络虚拟乐器,使用HTML、JavaScript、CSS技术,在网络上建立虚拟的钢琴,任何一个用户在任何地点通过可以联网的计算机都可以使用该虚拟钢琴,所有的操作均通过浏览器执行,不需要专门的客户端,并且通过web前端技术将用户的交互功能在本地实现,在最大程度上减少了对于服务器的压力,从而提高了运行的速度。同时,降低了硬件的成本并且用户无需进行后期的维护,极大的方便了用户的使用。
Description
技术领域
本发明属于互联网技术领域,具体涉及一种钢琴类网络虚拟乐器。
技术背景
目前,已有的虚拟乐器主要是由以下两种方式实现:
第一,采用3D投影以及感官交互的方式,通过对动作的监测以及数据处理从而实现虚拟乐器的工作。其主要包括人体辅助装置、3D摄影装置、3D投影装置和信号处理单元,其中人体辅助装置采集人体的声音信息、接触觉信息、压力觉信息,并将上述信息转换为信号发送到信号处理单元,信号处理单元处理该信号,并且发出信号控制人体辅助装置反馈听觉感知信息、接触绝感知信息、压力觉感知信息;同时控制3D投影装置反馈听觉感知信息。
第二,使用传感器等硬件设备搭建虚拟乐器,并结合音箱、声音数据库、上位机等构成一个基于传感器的虚拟乐器***。该***通过传感器采集振动,压力等参数并将其交给上位机进行信号处理与声音数据库进行匹配从而形成音频文件,再将音频信号通过音箱进行播放。
以上两种方式的特点以及存在的问题如下:
第一种,该方式通过3D投影、3D摄影、动作轨迹监测实现虚拟乐器,可以很真实的模拟出现有的乐器,使用者能体验到在真实乐器上弹奏的交互效果。但是该方式需要硬件支持,不便于携带并且3D摄影、3D投影技术的代价高昂,不利于大规模推广。
第二种,要使用到传感器、音箱、以及上位机等硬件设备,成本高昂,并且由传感器构成的硬件***体积庞大,不便于携带,由于每一种乐器都要由不同的传感器获取数据,需要上位机通过不同的程序进行数据的处理,所以可扩展性差,不具备通用性。
发明内容
本发明的目的就是为了解决上述现有技术中的不足,提供一种钢琴类网络虚拟乐器,该虚拟钢琴是通过网络在计算机上使用,所以对于硬件的要求极低,只需要用户可以接入网络,并且具有音箱设备用以播放音频即可,相对于现有的通过传感器、以及3D投影等技术实现的虚拟乐器,降低了硬件的成本并且用户无需进行后期的维护,极大的方便了用户的使用。
本发明的目的是通过以下技术方案实现的:一种钢琴类网络虚拟乐器包括虚拟钢琴界面、虚拟钢琴琴键映射清单、动态交互模块、音频调用以及播放模块。
所述虚拟钢琴界面,本模块作为整个虚拟乐器的主界面,直接与用户进行交互,利用图像处理软件设计一个个独立的琴键图片,并通过网页布局的方式将这些独立的琴键图片进行排列拼接,用户根据自己的需要确定琴键的数量,从而构成不同形式的钢琴键盘界面。
所述虚拟钢琴琴键映射清单,用于确定电脑键盘的按键和虚拟钢琴的琴键之间的对应关系;以及确定电脑键盘的按键和虚拟钢琴的不同单音的音频文件之间的对应关系。
所述动态交互模块,是整个乐器和用户之间进行交互的主要部分,通过虚拟钢琴琴键映射清单,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再对相应琴键图片进行切换以实现不同的阴影效果变换,用于模拟真实的钢琴琴键被按下和弹起的过程。
所述音频调用以及播放模块,提前录制真实钢琴琴键被按下时的声音作为音源,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再根据虚拟钢琴的琴键和其发出的单音的对应关系,调用扬声器播放对应音频。
在上述技术方案中,所述虚拟钢琴界面的具体构建步骤如下:
步骤一,钢琴琴键的素材制作
使用Photoshop软件设计钢琴的黑键和白键的图片,其中黑键和白键的图片包含两种,一种是琴键被按下时的效果,有阴影,另一种为琴键未被按下时的效果,无阴影;被按下时的效果是根据实际的钢琴琴键被按下之后的阴影效果,对琴键的图片添加阴影;
步骤二,对琴键的图片进行布局
新建一个HTML文档,在该文档中新建一个id属性设置为mainframe的div标签作为容纳钢琴各个部分的底层容器,并在HTML文档的style标签中通过id选择器设置这个div标签的左边距和上边距,确定其位置;再新建一组ul标签用来作为容纳所有白键和黑键的容器,分别对白键和黑键进行布局:
(1)对钢琴的白键进行布局
在style标签中新建一个白键的CSS类命名为whiteKeyClass,从而确定每一个白键的浮动方式、大小以及白键之间的间距,新建一个名为whiteKeyNormal的CSS类设置其背景图片属性为没有按下时的白键图片,再新建一个名为whiteKeyPressed的CSS类设置其背景图片属性为被按下时的白键图片;使用li、div、a三个标签的组合来表示一个钢琴白键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳白键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建n个相同的组合用来表示n个钢琴白键,在这n个组合中li标签的class属性设置为whitKeyClass和whiteKeyNormal,这n个a标签的id属性依次设置为key1~keyn,用来唯一标识每一个白键组合,其中,n取决于具体钢琴白键的数量;
(2)对钢琴的黑键进行布局
在style标签中新建一个黑键的CSS类命名为blackKeyClass,从而确定每一个黑键的浮动方式,以及大小,新建一个名为blackKeyNormal的CSS类设置其背景图片属性为没有按下时的黑键图片,再新建一个名为blackKeyPressed的CSS类设置其背景图片属性为被按下时的黑键图片;使用li、div、a三个标签的组合来表示一个钢琴黑键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳黑键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建m个相同的组合用来表示m个钢琴黑键,在这m个组合中li标签的class属性设置为blackKeyClass和blackKeyNormal,这m个a标签的id属性依次设置为keyb1~keybm,用来唯一标识每一个黑键组合,其中,m取决于具体钢琴黑键的数量。
在上述技术方案中,所述动态交互模块的具体实现方式如下:
步骤一,监测用户是否按下电脑键盘按键或者使用鼠标点击虚拟钢琴琴键;
步骤二,如果用户使用鼠标点击了虚拟钢琴琴键,获取被点击的琴键的id;根据虚拟钢琴的琴键和id的对应关系确定对应到哪个琴键;跳到步骤四;
步骤三,如果用户按下电脑键盘按键,获取电脑键盘的键值,根据电脑键盘键值和虚拟钢琴琴键的对应关系确定对应到哪个琴键;具体方式为,新建一个javascript脚本文件,并通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值;
步骤四,通过javascript脚本为虚拟钢琴对应琴键的a标签进行添加或移除琴键被按下和未被按下时的CSS类,实现琴键按下和弹起的效果。
在上述技术方案中,所述音频调用以及播放模块的具体实现方式如下:新建一个控制钢琴音频调用的JavaScript脚本文件,通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值,再根据键值和音频文件的映射关系确定到具体的哪一个音频文件应该被播放,使用鼠标点击琴键时通过设置点击的事件***确定哪一个琴键被点击,再根据琴键的id和音频文件的对应关系确定到具体的哪一个音频文件应该被播放,最后通过JavaScript内部的play函数对该音频进行播放。
本发明钢琴类网络虚拟乐器使用HTML、JavaScript、CSS技术,在网络上建立虚拟的钢琴,任何一个用户在任何地点通过可以联网的计算机都可以使用该虚拟钢琴,所有的操作均通过浏览器执行,不需要专门的客户端,并且通过web前端技术将用户的交互功能在本地实现,在最大程度上减少了对于服务器的压力,从而提高了运行的速度。由于该虚拟钢琴是通过网络在计算机上使用,所以对于硬件的要求极低,只需要用户可以接入网络,并且具有音箱设备用以播放音频即可,相对于现有的通过传感器、以及3D投影等技术实现的虚拟乐器,降低了硬件的成本并且用户无需进行后期的维护,极大的方便了用户的使用。
附图说明
图1为本发明中动态交互模块的工作流程图。
具体实施方式
以下结合附图和具体实施方式对本发明原理和实施作进一步说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不限定本发明。
本实施例提供了一种钢琴类网络虚拟乐器包括虚拟钢琴界面、虚拟钢琴琴键映射清单、动态交互模块、音频调用以及播放模块。
所述虚拟钢琴界面,本模块作为整个虚拟乐器的主界面,直接与用户进行交互,利用图像处理软件设计一个个独立的琴键图片,并通过网页布局的方式将这些独立的琴键图片进行排列拼接,用户根据自己的需要确定琴键的数量,从而构成不同形式的钢琴键盘界面。
所述虚拟钢琴琴键映射清单,用于确定电脑键盘的按键和虚拟钢琴的琴键之间的对应关系;以及确定电脑键盘的按键和虚拟钢琴的不同单音的音频文件之间的对应关系。具体对应关系如下表所示。
所述动态交互模块,是整个乐器和用户之间进行交互的主要部分,通过虚拟钢琴琴键映射清单,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再对相应琴键图片进行切换以实现不同的阴影效果变换,用于模拟真实的钢琴琴键被按下和弹起的过程。
所述音频调用以及播放模块,提前录制真实钢琴琴键被按下时的声音作为音源,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再根据虚拟钢琴的琴键和其发出的单音的对应关系,调用扬声器播放对应音频。
在上述实施例中,所述虚拟钢琴界面的具体构建步骤如下:
步骤一,钢琴琴键的素材制作
使用Photoshop软件设计钢琴的黑键和白键的图片,其中黑键和白键的图片包含两种,一种是琴键被按下时的效果,有阴影,另一种为琴键未被按下时的效果,无阴影;被按下时的效果是根据实际的钢琴琴键被按下之后的阴影效果,对琴键的图片添加阴影;
步骤二,对琴键的图片进行布局
新建一个HTML文档,在该文档中新建一个id属性设置为mainframe的div标签作为容纳钢琴各个部分的底层容器,并在HTML文档的style标签中通过id选择器设置这个div标签的左边距和上边距,确定其位置;再新建一组ul标签用来作为容纳所有白键和黑键的容器,分别对白键和黑键进行布局:
(1)对钢琴的白键进行布局
在style标签中新建一个白键的CSS类命名为whiteKeyClass,从而确定每一个白键的浮动方式、大小以及白键之间的间距,新建一个名为whiteKeyNormal的CSS类设置其背景图片属性为没有按下时的白键图片,再新建一个名为whiteKeyPressed的CSS类设置其背景图片属性为被按下时的白键图片;使用li、div、a三个标签的组合来表示一个钢琴白键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳白键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建n个相同的组合用来表示n个钢琴白键,在这n个组合中li标签的class属性设置为whitKeyClass和whiteKeyNormal,这n个a标签的id属性依次设置为key1~keyn,用来唯一标识每一个白键组合,其中,n取决于具体钢琴白键的数量;
(2)对钢琴的黑键进行布局
在style标签中新建一个黑键的CSS类命名为blackKeyClass,从而确定每一个黑键的浮动方式,以及大小,新建一个名为blackKeyNormal的CSS类设置其背景图片属性为没有按下时的黑键图片,再新建一个名为blackKeyPressed的CSS类设置其背景图片属性为被按下时的黑键图片;使用li、div、a三个标签的组合来表示一个钢琴黑键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳黑键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建m个相同的组合用来表示m个钢琴黑键,在这m个组合中li标签的class属性设置为blackKeyClass和blackKeyNormal,这m个a标签的id属性依次设置为keyb1~keybm,用来唯一标识每一个黑键组合,其中,m取决于具体钢琴黑键的数量。
在上述实施例中,如图1所示,所述动态交互模块的具体实现方式如下:
步骤一,监测用户是否按下电脑键盘按键或者使用鼠标点击虚拟钢琴琴键;
步骤二,如果用户使用鼠标点击了虚拟钢琴琴键,获取被点击的琴键的id;根据虚拟钢琴的琴键和id的对应关系确定对应到哪个琴键;跳到步骤四;
步骤三,如果用户按下电脑键盘按键,获取电脑键盘的键值,根据电脑键盘键值和虚拟钢琴琴键的对应关系确定对应到哪个琴键;具体方式为,新建一个javascript脚本文件,并通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值;
步骤四,通过javascript脚本为虚拟钢琴对应琴键的a标签进行添加或移除琴键被按下和未被按下时的CSS类,实现琴键按下和弹起的效果。
在上述实施例中,所述音频调用以及播放模块的具体实现方式如下:新建一个控制钢琴音频调用的JavaScript脚本文件,通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值,再根据键值和音频文件的映射关系确定到具体的哪一个音频文件应该被播放,使用鼠标点击琴键时通过设置点击的事件***确定哪一个琴键被点击,再根据琴键的id和音频文件的对应关系确定到具体的哪一个音频文件应该被播放,最后通过JavaScript内部的play函数对该音频进行播放。
使用虚拟钢琴的硬件要求:笔记本电脑推荐使用全尺寸键盘和外接鼠标,台式电脑应该外接麦克风、音箱、以及键盘和鼠标。电脑应安装有支持HTML5和JavaScript的浏览器,且可以接入网络。
搭建虚拟钢琴的硬件要求:如果要自行搭建虚拟钢琴网站并在网络上为其他用户提供虚拟钢琴的服务,则需要一台可以连接网络的服务器、以及相应的服务器管理软件、一个可以正常使用的域名。
本实施例钢琴类网络虚拟乐器的工作流程如下:
电脑通过浏览器输入域名,浏览器向服务器的相应端口(该端口由服务器的管理者设置)发送获取虚拟钢琴页面的请求,服务器对该请求作出响应同时在服务器的磁盘中找到虚拟钢琴的页面并返回给发送请求的浏览器,浏览器获取页面之后对其中的HTML和JavaScript、CSS进行解析,并且在浏览器窗口进行显示。
在显示完成之后,虚拟钢琴开始正常工作,电脑的键盘按键被按下或者鼠标被点击,操作***对对应的事件进行响应,对于键盘按键返回键值对于鼠标点击返回鼠标的坐标,浏览器获取到这些信息之后,由从服务器获取的JavaScript脚本文件进行处理对应到钢琴按键的图片样式的变化,并生成虚拟钢琴按键对应的音频的http请求,再由浏览器将这些请求发送到服务器,服务器对这些请求进行响应之后再根据请求中提供的路径在磁盘中找到相应的音频文件,在通过网络发送到发送这些请求的浏览器,最后由JavaScript脚本调用音频播放的函数,由电脑的扬声器对该音频进行播放。
本说明书中未作详细描述的内容,属于本专业技术人员公知的现有技术。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (4)
1.一种钢琴类网络虚拟乐器,其特征在于:包括虚拟钢琴界面、虚拟钢琴琴键映射清单、动态交互模块、音频调用以及播放模块;
所述虚拟钢琴界面,利用图像处理软件设计一个个独立的琴键图片,并通过网页布局的方式将这些独立的琴键图片进行排列拼接,用户根据自己的需要确定琴键的数量,从而构成不同形式的钢琴键盘界面;
所述虚拟钢琴琴键映射清单,用于确定电脑键盘的按键和虚拟钢琴的琴键之间的对应关系;以及确定电脑键盘的按键和虚拟钢琴的不同单音的音频文件之间的对应关系;
所述动态交互模块,是整个乐器和用户之间进行交互的主要部分,通过虚拟钢琴琴键映射清单,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再对相应琴键图片进行切换以实现不同的阴影效果变换,用于模拟真实的钢琴琴键被按下和弹起的过程;
所述音频调用以及播放模块,提前录制真实钢琴琴键被按下时的声音作为音源,将电脑键盘被按下或虚拟钢琴琴键被鼠标点击这一事件映射到虚拟钢琴的某一个或几个琴键被按下,再根据虚拟钢琴的琴键和其发出的单音的对应关系,调用扬声器播放对应音频。
2.根据权利要求1所述的钢琴类网络虚拟乐器,其特征在于所述虚拟钢琴界面的具体构建步骤如下:
步骤一,钢琴琴键的素材制作
使用Photoshop软件设计钢琴的黑键和白键的图片,其中黑键和白键的图片包含两种,一种是琴键被按下时的效果,有阴影,另一种为琴键未被按下时的效果,无阴影;被按下时的效果是根据实际的钢琴琴键被按下之后的阴影效果,对琴键的图片添加阴影;
步骤二,对琴键的图片进行布局
新建一个HTML文档,在该文档中新建一个id属性设置为mainframe的div标签作为容纳钢琴各个部分的底层容器,并在HTML文档的style标签中通过id选择器设置这个div标签的左边距和上边距,确定其位置;再新建一组ul标签用来作为容纳所有白键和黑键的容器,分别对白键和黑键进行布局:
(1)对钢琴的白键进行布局
在style标签中新建一个白键的CSS类命名为whiteKeyClass,从而确定每一个白键的浮动方式、大小以及白键之间的间距,新建一个名为whiteKeyNormal的CSS类设置其背景图片属性为没有按下时的白键图片,再新建一个名为whiteKeyPressed的CSS类设置其背景图片属性为被按下时的白键图片;使用li、div、a三个标签的组合来表示一个钢琴白键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳白键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建n个相同的组合用来表示n个钢琴白键,在这n个组合中li标签的class属性设置为whitKeyClass和whiteKeyNormal,这n个a标签的id属性依次设置为key1~keyn,用来唯一标识每一个白键组合,其中,n取决于具体钢琴白键的数量;
(2)对钢琴的黑键进行布局
在style标签中新建一个黑键的CSS类命名为blackKeyClass,从而确定每一个黑键的浮动方式,以及大小,新建一个名为blackKeyNormal的CSS类设置其背景图片属性为没有按下时的黑键图片,再新建一个名为blackKeyPressed的CSS类设置其背景图片属性为被按下时的黑键图片;使用li、div、a三个标签的组合来表示一个钢琴黑键,首先在最外侧新建一个li标签,在这个li标签的内部依次嵌套div和a标签,其中div标签用来作为容纳黑键图片的容器,a标签用来实现鼠标点击时琴键被按下的效果;在ul标签中一共需新建m个相同的组合用来表示m个钢琴黑键,在这m个组合中li标签的class属性设置为blackKeyClass和blackKeyNormal,这m个a标签的id属性依次设置为keyb1~keybm,用来唯一标识每一个黑键组合,其中,m取决于具体钢琴黑键的数量。
3.根据权利要求1所述的钢琴类网络虚拟乐器,其特征在于所述动态交互模块的具体实现方式如下:
步骤一,监测用户是否按下电脑键盘按键或者使用鼠标点击虚拟钢琴琴键;
步骤二,如果用户使用鼠标点击了虚拟钢琴琴键,获取被点击的琴键的id;根据虚拟钢琴的琴键和id的对应关系确定对应到哪个琴键;跳到步骤四;
步骤三,如果用户按下电脑键盘按键,获取电脑键盘的键值,根据电脑键盘键值和虚拟钢琴琴键的对应关系确定对应到哪个琴键;具体方式为,新建一个javascript脚本文件,并通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值;
步骤四,通过javascript脚本为虚拟钢琴对应琴键的a标签进行添加或移除琴键被按下和未被按下时的CSS类,实现琴键按下和弹起的效果。
4.根据权利要求1所述的钢琴类网络虚拟乐器,其特征在于所述音频调用以及播放模块的具体实现方式如下:新建一个控制钢琴音频调用的JavaScript脚本文件,通过调用JavaScript内部的onkeydown函数监测用户是否按下了电脑键盘上的按键,并且获得键值,再根据键值和音频文件的映射关系确定到具体的哪一个音频文件应该被播放,使用鼠标点击琴键时通过设置点击的事件***确定哪一个琴键被点击,再根据琴键的id和音频文件的对应关系确定到具体的哪一个音频文件应该被播放,最后通过JavaScript内部的play函数对该音频进行播放。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710534923.9A CN107329660A (zh) | 2017-07-03 | 2017-07-03 | 一种钢琴类网络虚拟乐器 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710534923.9A CN107329660A (zh) | 2017-07-03 | 2017-07-03 | 一种钢琴类网络虚拟乐器 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN107329660A true CN107329660A (zh) | 2017-11-07 |
Family
ID=60198062
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710534923.9A Pending CN107329660A (zh) | 2017-07-03 | 2017-07-03 | 一种钢琴类网络虚拟乐器 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN107329660A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108089837A (zh) * | 2018-01-04 | 2018-05-29 | 广州视源电子科技股份有限公司 | 一种麦克风的切换方法、装置、设备及存储介质 |
CN108182927A (zh) * | 2017-12-29 | 2018-06-19 | 深圳市翠园科技有限公司 | 基于移动终端实现与植物的远程互动的***及其实现方法 |
CN109448131A (zh) * | 2018-10-24 | 2019-03-08 | 西北工业大学 | 一种基于Kinect的虚拟钢琴弹奏***的构建方法 |
CN113485559A (zh) * | 2021-07-23 | 2021-10-08 | 王皓 | 基于全景漫游平台的虚拟乐器演奏方法及*** |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101465121A (zh) * | 2009-01-14 | 2009-06-24 | 苏州瀚瑞微电子有限公司 | 触摸式虚拟电子琴的实现方法 |
CN102314294A (zh) * | 2010-06-29 | 2012-01-11 | 宏碁股份有限公司 | 执行应用程序的方法 |
CN103235641A (zh) * | 2013-03-17 | 2013-08-07 | 浙江大学 | 一种6维度感官交互的虚拟键盘乐器***及其实现方法 |
US20170047056A1 (en) * | 2015-08-12 | 2017-02-16 | Samsung Electronics Co., Ltd. | Method for playing virtual musical instrument and electronic device for supporting the same |
CN106815513A (zh) * | 2015-11-27 | 2017-06-09 | 北京金山安全软件有限公司 | 一种终端的解锁方法和相关装置及设备 |
-
2017
- 2017-07-03 CN CN201710534923.9A patent/CN107329660A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101465121A (zh) * | 2009-01-14 | 2009-06-24 | 苏州瀚瑞微电子有限公司 | 触摸式虚拟电子琴的实现方法 |
CN102314294A (zh) * | 2010-06-29 | 2012-01-11 | 宏碁股份有限公司 | 执行应用程序的方法 |
CN103235641A (zh) * | 2013-03-17 | 2013-08-07 | 浙江大学 | 一种6维度感官交互的虚拟键盘乐器***及其实现方法 |
US20170047056A1 (en) * | 2015-08-12 | 2017-02-16 | Samsung Electronics Co., Ltd. | Method for playing virtual musical instrument and electronic device for supporting the same |
CN106815513A (zh) * | 2015-11-27 | 2017-06-09 | 北京金山安全软件有限公司 | 一种终端的解锁方法和相关装置及设备 |
Non-Patent Citations (2)
Title |
---|
YRQ110: "把浏览器变成钢琴!Web Audio API入门", 《V2EX HTTP://WWW.V2EX.COM/T/301147》 * |
疯狂JAVA: "Java编程实例模拟钢琴", 《豆丁网 HTTP://WWW.DOCIN.COM/P-1720754349.HTML》 * |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN108182927A (zh) * | 2017-12-29 | 2018-06-19 | 深圳市翠园科技有限公司 | 基于移动终端实现与植物的远程互动的***及其实现方法 |
CN108089837A (zh) * | 2018-01-04 | 2018-05-29 | 广州视源电子科技股份有限公司 | 一种麦克风的切换方法、装置、设备及存储介质 |
CN108089837B (zh) * | 2018-01-04 | 2021-05-11 | 广州视源电子科技股份有限公司 | 一种麦克风的切换方法、装置、设备及存储介质 |
CN109448131A (zh) * | 2018-10-24 | 2019-03-08 | 西北工业大学 | 一种基于Kinect的虚拟钢琴弹奏***的构建方法 |
CN109448131B (zh) * | 2018-10-24 | 2022-07-26 | 西北工业大学 | 一种基于Kinect的虚拟钢琴弹奏***的构建方法 |
CN113485559A (zh) * | 2021-07-23 | 2021-10-08 | 王皓 | 基于全景漫游平台的虚拟乐器演奏方法及*** |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11822919B2 (en) | Auto-generation of API documentation via implementation-neutral analysis of API traffic | |
US8640034B2 (en) | Remote GUI control by replication of local interactions | |
Reed et al. | An overview of the Pablo performance analysis environment | |
KR100290198B1 (ko) | 클라이언트와비상주서버프로그램사이의통신을위한시스템 | |
US8830188B2 (en) | Infrastructural haptics on wall scale interactive displays | |
CN107329660A (zh) | 一种钢琴类网络虚拟乐器 | |
Rubine et al. | The videoharp | |
Kuutti et al. | Virtual prototypes in usability testing | |
JP6225543B2 (ja) | 議論支援プログラム、議論支援装置及び議論支援方法 | |
JP2024506461A (ja) | 仮想現実環境のためのシステム及び方法 | |
CN107368568A (zh) | 一种笔记生成的方法、装置、设备和存储介质 | |
JP2023553513A (ja) | 仮想現実環境ベースの訓練及び認証を提供するためのシステム及び方法 | |
CN106713494A (zh) | 一种智能审计方法和装置 | |
CN108351766A (zh) | 从移动设备创建和修改应用 | |
Kirkbride | Troop: a collaborative tool for live coding | |
CN107358943A (zh) | 一种网络虚拟木管乐器 | |
Feng | Design and research of music teaching system based on virtual reality system in the context of education informatization | |
CN107205043A (zh) | 一种提琴类网络虚拟乐器 | |
CN107329691A (zh) | 一种网络虚拟铜管乐器 | |
CN107357519A (zh) | 一种网络虚拟架子鼓 | |
CN107273039A (zh) | 一种网络虚拟口琴 | |
Magnus et al. | Musician Assistance and Score Distribution (MASD). | |
Pan et al. | Musical instruments simulation on mobile platform | |
JP2002297993A (ja) | 広告プロモーション装置ならびにその方法 | |
JP2016051150A (ja) | 演奏支援システム |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20171107 |
|
RJ01 | Rejection of invention patent application after publication |