您好, 访客   登录/注册

基于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