基于Vue 的“阙音静听”音乐WebApp
◎范程泽王康尼坤晒2pm合照
李宁宁
一、引言
基于互联网的发展和以智能移动设备的普及，我们打算研发一款基于手机互联网使用两不误，并且具有方便快捷下载方式的APP 囧，简单易学适合各年龄段人。因为于各大音乐平台的消费限制，许多人感触颇深，设计“阙音静听”的初衷是为了让用户实现“用完即走，实用高效”的音乐体验感。这款音乐we-bAPP 的创新之处在于，可用于快速搭建大型单页应用，框架具有更小的体积占用内存量更小，响应迅速，组建模式一体化，项目结构代码被细化，不至于逻辑混乱。在互联网建壮的今天，我决定做一个网上实现在线听歌的项目，此项目采用线上抓取音乐数据，实时对接网上流行数据，能够帮助用户在线，实时获取流行歌单，还能帮助用户根据自己喜欢的歌手分类，查歌手的歌曲，能根据自己想听的歌曲进行在线查，是我们此项目的目的。
二、国内外研究现状（一）国内研究现状
在国内，对音乐webApp 在界面设计优化及用户使用质量上的合理性方面的研究并不多，能够参考学习的理论资料也是寥寥无几，因此非常需要我们来分析研究并创新webAPP 应用程序的设计与实现。国内目前使用手机听音乐的主流方式基本为使用音乐APP （如QQ 音乐，酷狗音乐，网易云音乐等），而音乐App 市场被这三大公司占据了绝大部分，而其仍然存在一些弊端，如：收费较高、需要下载App、版权不互通等问题，导致某些时刻用户体验较差。
（二）国外研究现状
在国外，有一款PowerAMP 和webAPP 有相似之处，但它不能够下载音乐也不能进行在线播放或下载管理。它能够支持多种音频格式文件和歌词同步。另一方面，它和国内大多数播放器的界面风格略显不同它也提供的主题。PowerAMP 在音质方面做的也非常好能够耳机线控用户可以调节均衡器来改变音乐音质。而本文研究通过自带浏览器进入指定链接或扫描二维码即可使用和其他App 端音乐播放器相似的功能。
三、研究前期
（一）Vue 的特
图1
Vue
特示意图
（二）需求分析
通过对音乐WebApp的网页布局进行了深入研究，该系统的主要功能需求如下：
1.音乐列表的呈现和音乐资源的获取。
在用户进入网站系统后，将推荐一些受用户欢迎度比较高的音乐。首页会将音乐按分类进行呈现，以便用户精确选择收听。并且系统会提供随机推荐的功能，将会推荐音乐给有需要的用户。
2.用户个人的功能相关设置。设置私密听取以及将音乐提前离线下载到本地。另外，用户能够对网页上的音乐进行整理、分组，从而实现个性的音乐库。对于不需要的书籍，可以一键移出。
3.音乐的详情概况。当用户点进一首歌时，将进入这首歌的详情概况以及音乐的名、作者等内容，以及内容的试唱。
4.音乐播放器的应用。用户能够个性化设置自己的播放器，
如设置字体字号，背景颜等。
5.音乐信息的检索功能。在网站首页提供搜索框和音乐的分类栏目，实现了对歌曲内容的某一关键字的查，以便直接检索出用户所期望的相关歌曲。
6.性能需求分析有如下三点：
（1）跨平台需求。可以摒弃APP会员制，达到网站音乐共享。移动终端设备操作进入网站，可以搜到音乐APP上的音乐。种类多样且音质优，移动音乐Web应用需要具备跨平台的特性，同时还需要解决移动终端的兼容性问题，实现最大限度的设备适配，从而加快项目程序的开发进度、提升项目的可维护性。
（2）离线存储。为了增强用户体验同时降低用户流量消耗，应当在用户处于不稳定的网络状态或没有网络覆盖的环境下，如处于电梯或地铁环境下，保证用户能够畅通无阻地进行听歌。
（3）响应的及时性。对于用户的阅读操作，如搜索音乐内容关键词、跳转到指定位置、进行听歌习惯的个性化设置，本We-bApp需要在极短的时间内做出响应，以防止用户应等待太长的响应时间而无法接受这款应用。
（4）浏览器兼容性。各种移动终端可以使用本设备的浏览器在线搜索，可以随时随地，想听就听。
（三）项目特
国内外各大音乐APP，不仅需要下载软件听歌且需要收费，占用内存等，而“阙音静听”音乐发现了这个缺点，利用“带货”，“直播”等功能来填补费用上的缺失，从而实现用户可以低价甚至免费使用的特点；
另一方面，“阙音静听”整合了市面上的音乐，利用api接口从而实现音乐都可以听的优势。并且“阙音静听”是一款WebApp，所以用户一个APP都不需要下载就可以随时随地，想听就听。
四、webMusic的设计与实现
（一）技术路线流程
图2技术路线图
（二）可行性分析
可行性分析主要从社会可行性，技术可行性和经济可行性。随着社会发展迅速，人们生活节奏加快，生活压加大，而听音乐则是越来越多人解压的方式之一，因此访问网站听歌可能性很大。而技术方面，实现在线听歌的网站项目，采用的技术是Vue，软件是webStorm，数据采取线上接口抓取歌曲数据的方式，并在Chrome浏览器上进行测试，可以对项目进行实现以及项目性能或者界面动画的优化等等。经济上可以对浏览器完全免费，综上所述，本次项目在经济上也是可行的，零成本。
图3可行性分析示意图
（三）系统功能概述
1.使用浏览器，输入本网站网址，即可进入本网站的首页，
首
页会为用户推荐多个歌单，用户可以根据自己的爱好进入歌单，歌单中会列出歌曲列表，用户选择自己想要听的歌曲，点击即可播放。
2.用户可以在页面中的导航栏目中来回切换导航栏选项，包括首页、排行、歌手、搜索。
用户可以选择性地进入导航栏目。首页包含推荐歌单，点击歌单进入歌单列表，点击列表歌曲即可播放歌曲。
3.用户进入排行导航栏，排行页面为用户推荐各榜单的歌
单，点击歌单进入歌单列表，点击列表歌曲即可播放歌曲，进入到播放详情页。
4.用户进入歌手栏，歌手栏页面列出按26个英文字母排序的歌手名字，右侧有A-Z的nav栏导航，用户
可以滑动或点击字母，页面会跳转到该字母下的歌手栏。用户点击歌手头像或名字，可以进入歌手的歌单，点击歌单列表，播放歌曲。
5.用户进入搜索栏。搜索栏可供用户输入框搜索关键字听歌，搜索项将按列表形式展示搜索结果，用户点击搜索到的歌曲列表可以实现播放歌曲，进入到播放详情页。该页面为用户推荐搜索量最大的歌曲，用户点击可以播放歌曲。页面记录用户的搜索历史，方便用户再次搜索。将用户的搜索历史以列表的形式储存在搜索页，用户点击列表中的单首歌曲后，可以播放被点击的歌曲，并自动进入播放详情页。用户也可以单击储存历史右侧的“X”号，则会将此首歌曲删除。
6.播放歌曲页面，页面有歌曲的歌曲封面，封面会自动顺时针转动。播放页有“播放”、“暂停”、“上一曲”、下一曲的功能，点击播放或者暂停，二者会来回切换，点击上一曲，歌曲会播放播放列表中的上一曲，如果没有上一曲，标签置灰。点击“下一曲“，歌曲会进入到播放列表中的下一曲，如果没有下一曲，标签置灰。
7.当播放歌曲之后，页面下面会有一个“mini“播放器，迷你播放器包括歌手头像，暂停按钮，歌曲列表标签。点击头像进入播放页，点击暂停按钮，进行暂停播放来回切换。点击歌曲列表按钮，会展示当前播放歌曲的歌单。
8.用户在点击歌曲播放之后，每个页面的底部都添加一个mini播放器，这个播放器布局包括歌曲的封
面icon，播放/暂停按钮可以来回切换歌曲的播放或暂停状态，播放列表（单击会弹出当前播放列表的歌曲站队）。
buckethead图4系统功能概述图
五、结论
本文介绍了基于Vue的“阙音静听”webApp系统。深入研究基于Vue的音乐webAPP的背景以及国内外研究现状，设计并实现了完整的操作系统，为人们在线听音乐建立了一个良好的平台，使人们可以更加方便快捷地去享受音乐。分析了本系统的功能性需求与非功能需求，并详细对各个模块功能的设计细节逐一论述。最后对该系统进行功能测试、性能测试和安全测试，基本满足设计需求。
webAPP技术在浏览器中虽然有一些缺陷尚未解决，但随着Vue技术的发展将会更加广泛和深入解决相关问题，也更加能够被用户接受和认同。综上所述，本文站在Vue的视角下，对webAPP音乐、浏览器以及用户需求分析进行分析并展开了论述，并在此基础上提出合理化建议，供以借鉴。
2021年长春工程学院大学生创新创业训练计划项目，项目编号S202111437097
剑殇
参考文献：
[1]吴清福，涂淑珍，马奕.WEB端音乐播放器的设计与实现.福建电脑，2018:
第2期
[2]李卓林，付冬梅，王高远，李颖，李晓刚.基于Android的腐蚀数据实时监控手
机APP软件设计与实现.2019.7：第31卷第4期.
[3]方钰敏，徐海蛟，符水梅，叶梦嘉，何佳蕾.基于Epub.js框架的移动阅读Wechoiza
12月的奇迹bAPP设计2021.7
[4]陆婷婷.一种基于vue技术开发的移动选题平台.2021.9
[5]王伟，常庆丽，吴朝霞.基于Spingboot+Vue的精准帮扶系统研究与实现.
2021.9（27期）
（作者单位：长春工程学院计算机技术工程学院）
飘移