基于HTML5+Nodejs+百度人脸识别音乐播放器的设计与实现

来源:用户上传      作者:

　　摘 要：随着人工智能的火热发展，与人工智能相关软件的需求也越来越大。然而，目前并没有一款关于人脸识别技术应用于音乐播放器的软件。由于软件用户端的多样化，针对不同的用户端需要开发不同的软件，造成资源的极大浪费。基于HTML5+Nodejs的人脸识别播放器填补人脸识别播放器与音乐播放器结合的空白，解决多端同时运行的软件的问题。只需要在浏览器上运行即可享受人工智能与音乐娱乐结合的体验。
　　关键词：HTML5;人脸识别;音乐播放器
　　随着人工智能的发展，图像识别，人脸识别的技术也越来越成熟，将人脸识别应用于音乐播放器，可以通过人脸识别，识别人体的面部情绪，根据情绪的好坏推送音乐，达到智能化播放音乐的目的。也可以通过人脸识别情绪，根据情绪改变软件界面，达到缓解用户心情的效果。为了能够保证与传统pc端的兼容，本文实现了基于html5[1]和nodejs的人脸识别音乐播放器。
　　1 系统的总体设计
　　目前移动端的软件开发模式主要有两种，[2]一种是native app，是根据手机具体的环境而开发的，例如安卓端的java开发，苹果端的objective-c等。Native app开发模式的缺点就是效率低，无法跨平台运行，开发一套系统软件需要在安卓和苹果端进行不同的重复开发，造成资源的浪费。另一种是web app，基于手机浏览器，任何安装了浏览器的移动端都可以运行，从而实现跨平台运行的目的。它具有免安装，免升级的特点。用户无需安装庞大的软件包安装，只需要输入网址，扫描二维码即可运行，而在软件升级的时候只需要更改web的服务器文件。Html5的到来让webapp也能做到native app可以做到的事情，例如播放視频，音乐动画等。Ajax和json技术让页面与服务器的数据交换量大大降低，从而提升用户的体验。CDN[3]网络技术的出现，让页面的加载更加迅速，其加载时间可以媲美native app。Nodejs的出现可以让前端的开发语言在服务器端运行。在不久的将来通过web技术的进一步发展，web app将是未来发展的主流。
　　2 相关技术
　　2.1 百度人脸识别api
　　百度人脸识别是为企业和个人提供人脸识别服务的一个接口，包括了JavaScript接口，安卓sdk，ios的sdk等。可以实现用户上传人脸识别的图片，返回人脸识别的结果。包括人脸的旋转角度，人脸的遮挡程度，人脸的情绪等等。本次系统采用的是JavaScript api接口，适用于pc和移动端通过浏览器访问
　　2.2 网易云音乐nodejs api
　　网易云音乐nodejs 版api是通过跨站请求伪造（CSRF），伪造请求头，调用官方 API，它提供了获取歌曲表单的接口，通过nodejs去调用API接口，返回歌曲表单的所有歌曲信息，包括歌单的类别，歌单的列表。提供获取歌曲详情信息的接口，可以返回歌曲的名字，播放音乐链接等。
　　2.3 Canvas
　　Canvas是html5的一个组件。它类似一块画布，可以通过与javascript交互在web上绘制动画、图表和任意的图像。在html5出现之前，网页动画视频的效果均由adobe flash提供，canvas的出现可以完全抛弃对flash插件的依赖。它支持原生的javascript交互，直接javacript语句操作，不需要加载任何的插件，从而保证了html5动画的高效性和原生性。
　　2.4 Ajax
　　Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax具有局部刷新网页的特点，可以在网页之间传递数据。通过JavaScript的HttpObject对象在网页之间形成信息交互，局部刷新需要改变的部分网页，而无需整体刷新网页导致资源浪费，减少了用户等待的时间，增加了用户体验效果。
　　3 系统的模块化设计与实现
　　3.1 获取人脸识别图片
　　在手机上通过摄像头拍照获取图片很容易，只需要使用原生系统拍照，利用浏览器调用文件api即可上传照片，但是这样只能人为地上传，不能满足实时性。其解决的办法是利用html5的vedio组件，在浏览器上调用手机摄像头的api，再通过canvas画布绘制摄像头捕捉的瞬时画面，达到拍照获取照片的效果。Video组件可让浏览器获取摄像头画面，但仅能显示摄像头画面，并不能获取图片。在事件触发情况下通过canvas绘制照片，就要用到canvas的drawImage（）方法来实现。触发事件后即可在video上绘制图像。
　　3.2 发送图片到百度人脸识别api
　　在获取了照片之后立马发送到百度api，但百度的api文档要求图片必须以base64格式传输，因此在发送照片之前必须要对图片进行转码，转码需要用到canvas对象的toDataURL（）函数，发送图片利用ajax技术发送，按照百度api文档的说明，发送的地址应当附带申请的百度密匙，发送的内容要指明传输的数据格式以及请求的参数，请求的返回人脸识别的表情（emotion）参数。当正确返回时，浏览器会得到人的脸部表情如happy，sad，surprise等等。
　　3.3 请求网易云音乐api获取歌单
　　当浏览器收到识别的表情，根据表情发送Ajax请求对应的歌单。例如，happy匹配轻松欢乐的歌单，sad匹配沉重悲伤的歌单等。请求对应歌单的数据，当浏览器成功接受到歌单信息时，随机从歌单中获取歌曲的id。
　　3.4 获取歌曲链接
　　获取了歌曲的id号就可以通过ajax请求歌曲的播放链接，通过Html的audio组件播放音乐。
　　4 总结
　　经过多番的调试之后，web app成功实现了跨平台的运行。做到pc端和移动端均可运行人脸识别的音乐播放器。应用以人脸识别技术为基础，满足了大家对人工智能软件日益增加的需求。基于html5实现了跨平台运行，利用nodejs技术，用javascript统一了web前端和服务器端。未来人工智能技术与web app技术将会得到更长远的发展，二者的结合进一步提高了人民生活水平。
　　参考文献：
　　[1]黄永慧，陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013（7）：207-210.
　　[2]钟迅科.基于HTML5的跨平台移动Web应用与混合型应用的研究[J].现代计算机（专业版），2014（13）.
　　[3]覃凤萍.基于HTML5+jQuery Mobile 的移动Web 应用开发研究[J].大众科技，2015，15（7）：9-10.
转载注明来源:https://www.xzbu.com/1/view-14931686.htm