《基于Vue的移动音乐播放器设计8000字（论文）》

绪论鉴于中国的技术进步和进展，越来越多的电脑和移动智能手机被使用，加速了性能的提高。对移动电话的要求也变得越来越复杂。网站和应用程序正在蓬勃发展，新的视频节目，音乐家的迭代和更新都是重要的指数创造，并注入新鲜血液【1】，丰富人们的日常生活和精神世界。在这种情况下，许多不同的方面不得不越来越频繁地回应在硬件方面的要求，无论是通过开发具有最新趋势的新设备，还是通过用户对高质量音乐的渴望，对放松和满足产生渴望。这就是为什么已经发明了音乐共鸣器，可以在世界范围内合理地找到。所以现在音乐设备是我们国家最重要的设备之一。本文主要是参考目前流行的某移动版的客户端，在此基础上进行进一步优化设计，现阶段设置一些基础功能：实现歌曲的播放和停止，上下多首歌曲切换，查询播放歌曲的歌手和专辑信息，收藏歌曲，设置铃声，选择歌曲的多种播放模式。同时，根据在使用过程中用户交互效果进行测试，通过利用Vue-cli，Vuex，Vue-router与axios等组件进一步对系统进行优化和设计，实现匹配的路由功能【2】，该客户端使用Vue-cli搭建整体框架，使用jsonp和axios实现服务端通讯，利用better-scroll完成移动端滚动库，达到用户能够点击验证的目的，最终实现歌曲的播放、停止以及其他功能。为了满足更好的用户体验，使用多个内部组件进行相互作用，使歌曲与歌手以及歌词相匹配，避免丢失音乐列表或者歌手列表，同时也避免其重复【3】。以实现音乐进程的精准控制，实现播放暂停，以及其他效果。

2移动音乐播放器的设计目标和需具备的功能2.1音乐播放器的设计目标本文要实现的设计目标很简单，就是通过该播放器为世界上的用户提供更好的听觉体验和使用感受，设计功能控制的音乐设备，以改善音频和用户感知的方式，使用户可以选择自己的歌曲而无需移动数据。因此，移动音乐播放器的最终实现用户是所有人，在人们空闲的时间，打开手机点开音乐播放器软件，就可以播放喜欢的音乐，享受这种体验【4】。音乐播放器的设计应该秉承简单、方便的设计理念，避免过多的功能，使用过程中不必要的操作，为用户带来更多的好处，增加用户的使用体验【5】。目前，市面上我们可以搜索到成千上万的移动播放器，其功能大同小异，最受欢迎的几款移动音乐播放器，其最大的特点是应用页面简约，用户打开播放器之后，然后简单地按下一个按钮就能听他们喜欢的音乐，同时，这些应用程序可以在用户尚未登录参与的情况下播放，极大程度上方便了用户的选择。我们设计的播放器功能简单，对特定设备的要求很低，这使得能够避免一些设备无法运行该播放器的现象。同时这款移动音乐播放器和传统手机播放器相比，开发成本会小很多，后期管理费用也较低【6】。只需要前端开发技术，就能开发出一款功能完善同时具备操作简单这个优点的移动音乐播放器，并且不需要用户耗费更多的流量和时间去下载这款音乐播放器，目标是为大众提供最好的用户体验。2.2完成移动音乐播放器需具备的功能首先，要求设计者能够熟练使用Vue-cli和Vue，利用其为媒介快速并且较为准确地开发Vue-cli脚手架工具和Vue-js框架，其次，熟练使用HTML5+CSS3，在简单处理UI设计图的基础上，将其完整实现，能够发现并处理浏览器的兼容环境问题；加之，一定程度上掌握JavaScript这个直译式脚本语言，在页面中，简洁明了地实现一些没有特效和逻辑的系统操作；最后，熟练使用ajax进行异步请求也是一种必不可少的能力，还有熟知node.JS，对系统管理命令提示符输入框中可以输入的每句话意思了如指掌。当然，还有一些或多或少都需要的技能，这里就不多加赘述了。为了实现前端的可视化，需要使用一个用于开发移动音乐作品的Vue.js前端技术实用框架，用来进行移动音乐播放器的开发使用。而这个前端技术框架还是用HTML5、CSS3、JavaScript构建的，它提供了许多功能，能够实现许多功能，比如能使用node.js服务端数据交互，同时实现HTML5的localStorage的存储。Ajax能够实现移动音乐播放器的数据请求，ajax是一种新兴的发展的Web表示层技术，能够以数据应用为框架和基础，满足用户的使用需求，通过它可以构建一个动态、快速并且灵活的Web应用系统程序，该程序能够独立于网页的服务端，且被动态写入。Ajax能够满足更新要求，网页实现较为快速的异步更新，和服务器在一定程度上，实现以数据为基础的交换【7】。在某种程度上消除了对网页的依赖性，在http数据请求的基础上，不需要考虑数据交互的问题。因此，该播放器的数据能够满足客户的使用体验，只用音乐播放，不涉及用户隐私，在一定程度上确保安全，并且建立移动音乐播放器的开发管理模式，与此同时，它还具有极强的稳定性和实用性。

3开发环境及开发工具介绍该软件是在windows10的系统下，使用jsonp在传统音乐软件接口扒取，获取真实后台数据，利用SublimeText3编辑器和better-scroll移动端插件，在node.js基础上，用vuex状态管理进行项目结构设计。3.1SublimeText3简介SublimeText作为一个高效的文本编辑器，还具有漂亮和简洁的用户管理界面。它拥有极其丰富的功能，是一个轻量级的编辑器【8】，能够缩略代码图，也能够跨平台运行。用户可以利用它使用python插件，或者插入代码片段。在简洁高效方面，它也有一番成就。为了方便，用户可以使用自定义键，自主设置菜单和工具条，它具有完整的PythonAPI和goto功能。当然，它还具有文本编辑器最基本的特点，类似wps，能够进行拼音检查和书签设置，能够多选和打开多窗口等等功能。同时，它也是一个跨平台的编辑器，以某种方式能够支持许多操作管理系统，类似于Linux、MacOSX等。SublimeText的优点很多：1、扩展功能较好，因此又被称为安装包；2、具有强大的按键快捷命令功能，在这个文本编辑器中，能够实时搜索到相应的命令、选项，得到所需地代码片段和对应的语法，然后用户只需按回车键就可以立即执行，这在很大程度上能够减少搜索量；3、能够进行即时文件交换的优点。能够随意执行跳转任务，到达任何文件中；4、具有多选功能。允许多个光标同时出现在同一个页面上；5、具有快速更新的优点；6、能够支持VIM模式，支持宏，简单来说就是支持用户记录操作，在另一方面用户可以尝试自己编写命令，然后会自动播放被记录的动作或命令；。3.2Node.JS简介Node.js是用于服务器端执行JavaScript语言的工作平台。Node.js不是一种语言，同时它也不是JavaScript的一个框架。与PHP、JSP、Python、Perl、Ruby这些语言和平台不同，node.js在Chrome的V8引擎上运行，使用JavaScript进行编程操作。Node.js的设计理念与传统架构有很大不同，它独立于其他服务器的系统软件，具有良好的扩展性。但是也存在一些问题，Node.js并没有相应的网络容器。Node.js的优点：1.首先，JavaScript语言在服务器上运行，这种语言以Node为基础，Node在某种意义上有点像JavaScript虚拟机；2.Node生态系统与其他系统相比更加活跃，有大量的开源库可提供，允许JavaScript语言与操作系统互动（例如，读写文件，子进程的新构造）。因此，可以想见，Node是一个属于JavaScript的工具库。3.3Vue.js简介Vue.js是目前最流行的一套MVVMJavaScript库，是一套新型架构框架，可被用来构建用户界面。它既拥有MVP框架的优点，也继承了WPF的新特性。它的基本原则是使用自底向上的增量开发设计，利用数据驱动的方法来构建框架。Vue.js的优势：1.与Angular.js相比，API能够被Vue.js更加简洁快速地提供，并且易于被大众所理解，对于普通人来说，能够更快地学习新内容并学会，更加准确地使用Vue.js；2.在Angular1中，应用范围内的每一个数据变化都会引起观察者的新计算。Angular封装了常见的Dom事件、XHR事件等，在这些事件中可以触发对Angular摘要的访问；3.在合成过程中，Angular会从rootscope滚动并开始检查所有监视器。此外，如果有可以触发其他更新的观察者，脏检查周期可以被多次执行。但相对来说，Vue并不存在这个问题，它以依赖性跟踪和异步队列为基础，更新系统。当然，在数据之间有明确表示的依赖关系的前提下，任何数据变化都会被独立处罚。

4移动音乐播放器的设计与实现4.1程序设计首先，建立Vue项目需要借助Vue-cli。如图4.1。在开发者创建web-music项目管理后，Vue-cli就会进入项目运行的目录，此时选择下载服务项目的所需模块。下载成功以后，用户可以直接运行这个项目，在管理员命令提示框中，输入npmrundev的指令。在附加框中，选择CommandPrompt这一选项。在程序地址后的显示框中，输入yarnstart指令。等待程序加载完成后，复制屏幕显示的网址:8081，将替换成localhost，意味着在本地服务器中，8081号端口能够被监听到，于是在浏览器中就会显示出一个listenworld程序。项目搭建完成以后，就会立刻执行，如图4.2所示。此时管理员命令提示框（win+R）会在显示器中跳出，然后需要开发者在该框中输入npmrundev指令，按Enter键确认后，加载后浏览器就能自动开启并运行管理项目，网络路由技术能够实现项目的页面跳转需求，而在SRC目录下的router.js中路由能被正确配置。项目运行后，需要打包项目，用户要在命令符提示框中输入npmrunbuild指令。加载完成后，项目目录中，会提供一个生成的dist文件夹，两个index.html文件和静态文件夹。在这之间，静态文件夹包含了所有的基本资源文件，但不包括编译后的主页面，也不包括压缩后的主页面，index拥有超文本标记语言，生成该应用需要的主页，管理者只需一个操作就可进入其中。进行部署操作时，在后期阶段，管理者上传所需，即文件夹名字为dist的，提交给服务器。使用者在后期能够减少使用成本和开销，同时该项目执行的速度在一定程度上也能得到提高。结束

开启浏览器运行项目Y开始结束

开启浏览器运行项目Y开始登录输入执行命令是否存在脚本搭建项目N开始创建web-music项目下载所需模块输入命令

打开浏览器

监听端口

显示Vue项目

结束图4.2执行Vue项目流程图移动音乐播放器的主要实现功能有以下这些，如下表4-1所示：（1）播放器的基本控制需求播放器的基本控制要求由三部分组成，包括播放、停止、上一首、下一首。播放：点击播放列表，用户可以选择想听的歌曲。在歌曲播放时，歌曲名称、歌手名称和专辑图片都会显示在页面中央，双击页面会出现该歌曲对应的歌词。停止：点击音乐列表中屏幕底部的圆形按钮。当歌曲处于播放模式中，点击该按钮，歌曲将立刻停止。上一首、下一首功能：在音乐列表中点击屏幕底部的两个三角形符号，左边是上一首，右边是下一首。（2）播放列表管理需求进入播放列表上“…”状的按钮，可以选择查看歌手相关信息，查看专辑相关信息以及将这首歌设置成铃声。（3）播放模式需求用户可以选择多种播放魔术：单曲循环、播放列表歌曲顺序播放、播放列表歌曲随机播放等等。音乐播放器还应该满足页面设计的需要，具有优秀的用户使用感，主要体现在：简洁明了的界面：清晰直观的应用界面，视觉上有良好的布局，设计合理，使用方便，能一眼找到想要的功能按钮；快速响应：能够在短时间内完成用户请求，以及及时反馈耗时原因。与此同时，该播放器还需要一些其他板块，如排行榜模块，包括热门音乐排行榜、热度飙升榜、人气音乐流行榜等。通过大数据的整合，用户可以实时了解歌曲的受欢迎程度，并可以根据自己的不同需求点击相关模块。在历史搜索模块中，用户点击“我的”中的搜索框可以找到过去搜索过的歌曲，方便了因时间间隔而没有保存歌曲的情况。表4-1移动音乐播放器实现需求表音乐播放器主要实现需求功能操作说明主要控制需求播放单击播放列表，随机选择屏幕中的歌曲，或者搜索喜欢的歌曲，点击歌曲右侧的播放键，歌曲得到播放停止系统处于播放状态时，点击歌曲列表上一个圆形按钮上一首、下一首选择单击歌曲列表左右两侧的两个三角形符号播放列表管理需求歌手、专辑信息点击播放列表上“…”状的按钮歌曲设为铃声播放模式管理需求列表随机播放如果想要选择某一模式，单击歌曲页面下端选择任意所需。列表循环播放单曲循环播放页面设计需求界面简洁直观布局合理其他需求排行榜模块点击首页“最新流行”历史搜索记录点击搜索框下方弹出的界面4.2程序实现歌曲页面的源码import{commonParams}from'./config'importaxiosfrom'axios'exportfunctiongetLyric(mid1){consturl='/api/lyric'constdata=Object.assign({},commonParams,{songmid:mid,platform:'yqq',hostUin:1,needNewCode:1,categoryId:1000,pcachetime:+newDate(),})returnaxios.get(url,{params:data}).then((res)=>{returnPromise.resolve(res.data)})};/*获取播放源连接密钥*/exportfunctiongetVkey(songmid){consturl='/api/vkey'constdata=Object.assign({},commonParams,{filename:`C400${songmid}.m4a`,guid:"1472321272",uin:0,platform:'listen',needNewCode:0,cid:"207341753",format:'jsonp'})returnaxios.get(url,{params:data})}returnjsonp(url,data,options)}

5测试音乐播放是这个项目最重要和最核心的功能。现在，介绍一下这个模块的详细测试报告。该播放器包括歌手检索的显示界面图（见图5.1）；播放器的主界面图（见图5.2）；流行歌曲列表的推荐名单（见图5.3）；播放数据页面的界面图（见图5.4)；此外，还对音乐播放器的稳健性和遇到紧急情况突发反应等性能方面进行了详细测试，如下表5-1所示。本文设计实现的是基于Vue的移动音乐播放器，这是一段发现问题、分析问题最后解决问题的过程，从需求分析、总体设计，再到具体功能的实现，通过不断细化和完善，致力于提高用户的使用体验，于是这款音乐播放器具有多样的功能，更加简单，便于使用，能够基本达到本课题要求的设计目标。与市场上现有的音乐播放器相比，本文旨在从功能性、易用性和卓越性这三方面来详细描述实现音乐播放器的优异性：（1）UI设计的应用更加简洁易用，设计的主界面直观清晰，便于用户迅速找到所需界面，音乐播放器集中在播放详情页，避免了UI的冗余设计。（2）设计了播放列表页面，允许用户根据自己的喜好选择不同的歌单，提高了用户的使用体验；设计了历史搜索引擎功能，能够利用快速定位，迅速搜索到所需文件。图5.1艺术家检索展示列表图5.2播放器主界面（“热门歌单”推荐界面）图5.3热门歌曲推荐列表图5.4播放详情页的界面图（3）设计在线音乐播放和设置为铃声功能。因此，该应用程序不是孤立的，而是作为大量音乐资源的入口，用户打开应用程序就像进入了音乐海洋，实现了与互联网的融合。在开始软件的测试之前，需要制定一个较为合理的测试计划，这个操作目的是尽可能多地发现程序中存在的问题。为了实现测试的应用程序能够成功运行，确保用户隐私不被泄露，所以选择的测试范本应该可靠，还要具备全面的优点。要根据现阶段用户需求、产品需要，在合理的范围内，测试者需有条理地选择之于测试的方法。在测试的全过程中，该应用程序应保持完整且不存在更改。对该项目制作的音乐播放器功能进行检测，以此选择几个重要方向，有推荐热门歌单的页面，有歌手集合页面，有最新歌曲的排行，还测试了搜索歌曲，当然必不可少的是歌曲播放和暂停的实验。表5-1该应用程序性能测试表测试方向得出结果播放功能，暂停功能能够实现，在不同时间不同歌曲上进行测试未发现卡顿播放形式顺利实现，在多种播放模式可供选择，有单曲循环播放模式，有列表循环播放魔术，有列表随机播放模式等等。上一首歌曲切换，下一首歌曲切换能顺利实现所需功能，切换至所需歌曲定位进度条顺利实现，鼠标任意点击想要跳至的歌词点，歌曲都会从该点开始，继续播放创建歌单用户右击想要添加的歌曲，选择加入歌单，若发现歌单未被创立，则系统自动生成默认歌单，用户可自主添加歌单名删除歌单顺利实现添加歌曲至歌单顺利实现多选一键播放选择歌单中想听的歌曲，一并加入到新生成的播放列表，歌曲能顺利播放本地搜索歌曲若本地存在该歌曲，正确返回歌曲记录；若不存在，返回空的结果列表根据上述测试得出结论，该应用程序功能完善，能应对一些突发情况，系统于实现操作应答上的速度，在可接受的阈值内。该程序也满足了用户所需的基本需求，并在一定程度上，对用户的隐私有保护功能。

6总结本文的主要工作是在深入研究Vue.js语言框架和移动开发技术的基础上，设计并实现一个基于Vue、功能丰富、用户体验良好的移动音乐播放器。本文的工作主要成果如下：对Android开源系统技术进行了深入研究，随后对Java语言和Androidstudio可视化开发工具进行了深入细致的研究；通过对Vue-cli和Vue的研究，以其为手段，快速、相当准确地开发了Vue-cli脚手架工具和Vue-js框架，实现了前端可视化界面。深入研究HTML5+CSS3，在简单处理UI设计的基础上，充分实现它，能够发现和处理浏览器环境的兼容性问题，同时对字面的JavaScript脚本语言、数据交互功能的实现等有一定的了解。移动音乐播放器的前提是，用户使用可以简单而安全，不需要个人用户隐私，以用户体验原则为先。它是一个单页应用程序，允许用户实现基于手机和互联网的"即用即走，即用即走"的需求，能够不涉及用户信息，确保安全，只用于音乐播放。移动音乐播放器的操作比较简单有几个原因，其中最重要的是，移动音乐播放器基于用户的请求，来实现数据响应。而这方面的问题，只需要开发者和管理员考虑，即用户不需要担心。在管理员进行的模拟测试中，保证应用程序可以正常访问，并且稳定运行。与手机中传统的原生软件相比，该音乐播放器软件的开发成本远低于原生软件，也不需要更多的管理费用，只需要具备前端开发技术，通过探索就可以移动一个音乐播放器，一个和手机本身类似的本地社交网络服务，用户不需要下载新的应用版本进行安装。占用流量配额，无论是维护还是更新这个应用都只需要管理员在服务器端更新相关文件，与传统的手机音乐播放器相比，能够为客户带来更多更好的体验，是一个简单而又极其实用的产品。本文通过对Vue.js框架的深入研究，对移动多媒体开发有了深刻的认识。本文的目的是实现一个基于vue的移动音乐播放器，支持音乐播放。但由于时间有限，个人的学习和能力有限，本文所设计的系统还有很多优化和改进的空间。例如，在播放音乐时，你可以添加播放相应的视频。此外，在功能上，本文所设计的音乐播放器仍有着很大的优化空间，等待着我们去丰富，当然出现这种问题也很正常，没有任何软件产品是不需要长期维护的，也需要开发者不断改进软件性能以适应时代的发展。毕竟对于开发者来说