2018年5月，Cloudinary赞助了美国国会音乐集团（Capitol Music Group）在其新成立的Capitol360创新中心（Capitol360 Innovation Center）举办的首个黑客竞赛，旨在连接音乐家和软件技术人员，促进和刺激音乐创作。详见本次访谈。作为hackathon的启动项目，我们构建了一个名为音乐发现服务（Music Discovery Service）的示例应用程序。由于授权问题，我们无法显示应用程序。构建一个音乐发现服务将诸如使用api、在浏览器中呈现音频和转换图像等技术概念结合在一起。音乐发现服务将它们组合成一个音乐播放器应用程序，您可以在其中浏览艺术家列表、搜索艺术家、选择艺术家专辑、查看选定专辑中的所有曲目，播放来自好了。这个指南将引导您完成创建音乐发现服务的过程，并突出显示其关键特色。我们使用Vue.js版JavaScript框架、es6javascript和Codepen环境。对它们的编程结构有实际的了解将有助于您遵循该过程。网络研讨会组件此应用程序包含四个主要组件，每个组件都作为组件内容的页面：浏览（也是主页）浏览器列表专辑玩有三个支持组件：立管装载机旋转木马唱片列表Browse组件因为浏览页面也是主页；我们必须定义它的路由，这样当有人访问根路径时，那些名字以特定字母开头的艺术家就会填充页面。换句话说，定义Browse组件的路由以匹配该需求。该路由还将访问者重定向到/browse/a路由。该语法意味着browse路由接受一个参数，在本例中是字母表的字母。BrowserList组件要显示从服务器返回的艺术家列表，我们需要一个列表组件来保存艺术家的个人数据。该组件还需要helper函数。为了完成所有这些，我们创建一个单独的实用程序文件，然后将该文件导入组件。英寸在实用程序文件中，我们声明并导出项目的基本API的URL和字母表中的字母。该文件包含用于导航的goTo函数。此外，该文件使用路由名称为该特定路由定义查询参数。该文件还包含一个normalizeTitle函数，该函数接受标题字符串作为参数，将标题中的所有空格和正斜杠替换为-。如何获得这些数据？从API。因为我们已经在实用程序文件中用helper函数定义了API，所以我们需要做的就是更新浏览器组件，以向API发出请求，然后将数据提供给浏览器列表。我们现在对从服务器返回的数据进行分页，因为我们不能在一个页面上显示所有内容。此外，在这一点上，只显示名字以字母a开头的艺术家。我们必须想办法把剩下的字母表。谢天谢地，Vuetify包含一个分页组件，该组件与字母筛选器一起添加到浏览器组件。还有，在BrowserList组件中，我们添加一个事件侦听器来侦听页面更改和字母表筛选器。。对于每个字母，当触发单击事件时，将调用goTo方法，该方法将访问群体导航到所选字母过滤器。现在我们需要一种方法让观众搜索他们最喜欢的艺术家。你可能会说，"哦，如果他们知道艺术家的名字，他们可以简单地使用字母过滤器。"如果他们不知道呢？如果有一百个同名艺术家呢？添加搜索功能将大大改善应用程序的用户体验。我们已经在UI中添加了一个搜索字段。现在让我们根据进入。下一个在浏览页面中添加了一个旋转木马来展示应用程序中艺术家的图像。我们创建一个名为旋转木马处理旋转木马的功能，然后将组件放在浏览页面中，如下所示：复制到剪贴板//卡鲁斯....方法：{transformCoverImage（项目）{控制台.log（项）；让url=项目.图像||'http://artwork-cdn.7static.com/static/img/artistimages/00/008/194/0000819457_300.jpg';返回此.cl.url（网址{宽度："1036"，身高：250，gravity:'中心'，crop:'垫'，aspectRatio:'16:9'，背景：'自动：主要',effect:'渐变_淡入：对称键盘：0.05英尺，fetchFormat:'自动'，format:'png'，quality:'自动'，type:'获取'，});},…我们从实用程序文件导入的cl函数来自Cloudinary库。使用面向web和移动开发者的媒体管理平台Cloudinary，我们可以像transformCoverImage方法中所看到的那样转换carousel上的图像。所以，让我们安装用于图像转换的Cloudinary JavaScript库。在项目的终端中运行以下命令文件夹：复制到clipboardnpm安装cloudinary core之后，打开实用程序文件并使用代码段在那里初始化cloudinary库以下：复制到剪贴板//实用工具.js...导出常数cl=cloudinary.cloudinary.new({cloud_name:'christekh'，安全：正确，})；最后，在浏览页面上引用新创建的carousel组件。该组件将显示在搜索的正上方场。那个相册组件当观众在浏览页面上单击某个艺术家的名字时，他们希望看到艺术家的精选专辑列表。为此，我们创建一个单独的组件作为相册页面。然后，我们在浏览页面上单击一个艺术家的名字，看看该专辑列表上应该有什么。现在，只显示breadcrumb；让我们生成一个相册列表。之前调用服务器获取艺术家的相册列表时，我们需要一个组件来显示该列表。为此，我们创建了一个名为AlbumList的组件，遍历该组件，然后将项目列表显示为组件属性。AlbumList接收两个属性：items，相册列表cl，用于图像转换的Cloudinary库。相册列表现在已经设置好，在相册页面上显示相册。作为一个好的触摸，显示艺术家的形象在专辑页码。音乐最后，我们建立了一个页面，在这个页面上可以按需播放专辑中的歌曲。我们通过创建一个名为Player的组件来实现这一点，该组件处理唱片集上的曲目列表，并保存播放器。该播放器是一个控制听众将要收听的音乐的组件：播放、停止、洗牌等等第四，这里我们要做的是：创建一个名为播放器.vue在组件中包含以下代码段文件夹：复制到剪贴板。。。。transformAlbumAvatarImage（）{返回此.cl.url(此.album.image, {宽度：200，身高：200，gravity:'自动'，crop:'填充'，fetchFormat:'自动'，quality:'自动'，type:'获取'，});},transformArtistBannerImage（）{返回此.cl.url(这个。艺术家。图像, {宽度：1800，身高：150，重力：'西'，crop:'lpad'，aspectRatio:'16:9'，背景：'自动：主要',fetchFormat:'自动'，quality:'自动'，type:'获取'，});},……注我们使用Cloudinary来转换transformalbumavaturage和transformArtistBannerImage方法中的横幅图像。接下来，我们更新player组件以从服务器。正在播放尽管播放器页面已经完成，但我们还没有在那里播放任何音乐。为了在页面上设置播放器，我们利用了vue-aplayer库，该库包含一个播放器组件，该组件具有播放、停止、无序播放、转发和其他任务的控件。为了使用播放器，我们在上面加载专辑的曲目列表，然后更新播放器.vue档案。社会分享一个很好的功能就是让观众分享他们正在听的曲目。vue社交共享库使创建社交共享链接变得轻而易举。只需将当前播放曲目的信息输入组件，它将生成共享链接。二步骤是参与：注册社交共享库作为应用程序的外部插件。打开播放器.vue归档并更新，以包含播放器。那个是的。简单如ABC。结论是你我刚刚学会了如何用VueJs制作音乐播放器。在此过程中，您将熟悉一些概念，如使用Cloudinary进行图像转换、从API获取和显示数据以及使用外部插件。如果您在评论中有任何问题，请告诉我们。