UniApp实现音乐播放与音乐搜索的实现方法 |
您所在的位置:网站首页 › uniapp实现搜索功能 › UniApp实现音乐播放与音乐搜索的实现方法 |
UniApp实现音乐播放与音乐搜索的实现方法 UniApp是基于Vue.js框架的前端开发框架,可以实现一次开发,多端发布的效果。本文将介绍如何使用UniApp实现音乐播放和音乐搜索功能。 一、使用UniApp实现音乐播放在UniApp中实现音乐播放功能的点睛之笔是H5播放器,使用H5播放器可以支持在APP、微信、支付宝小程序等多个平台上播放音乐。 需要注意的是,在使用H5播放器时要注意安卓和iOS系统的差异性,因为在安卓系统中音乐的播放需要通过muted属性来触发,而在iOS系统上则要通过用户手动操作才会有音乐播放。 下面是UniApp实现音乐播放功能的示例代码: // index.vue
播放
export default { data() { return { audioUrl: 'https://music.163.com/song/media/outer/url?id=434529132.mp3', }; }, methods: { play() { const audio = uni.createSelectorQuery().select('audio'); audio.boundingClientRect(function(rect) { audio.observer(function(res) { uni.showModal({ title: '播放状态', content: `播放状态: ${res.intersectionRatio !== 0}`, }); }).observeIntersectionObserver(); }).exec(); audio.src = this.audioUrl; audio.play(); }, onPlay() { uni.showModal({ title: '播放状态', content: '播放开始', }); }, }, }; 代码中使用了audio标签来加载音乐链接,然后通过uni.createSelectorQuery方法获取到audio节点的实例,从而对音乐节点进行观察。在观察到音乐节点时,可以使用uni.showModal方法来实时显示音乐的播放状态。 二、使用UniApp实现音乐搜索在实现音乐搜索功能时,需要使用到第三方的API接口来获取音乐信息。这里使用了NeteaseCloudMusicApi来获取音乐数据。 首先,需要在项目中安装NeteaseCloudMusicApi: // 安装NeteaseCloudMusicApi npm install NeteaseCloudMusicApi --save-dev 接着,需要在项目中进行配置: // uni.config.js文件 module.exports = { pluginOptions: { express: { shouldServeApp: true, serverDir: 'server' } } } 配置完成后,新建一个server文件夹,在文件夹中新建一个server.js文件。在文件中编写以下代码: // server.js const express = require('express') const { createProxyMiddleware } = require('http-proxy-middleware') const app = express() // 跨域代理 app.use('/api',createProxyMiddleware({ target: 'http://localhost:3000', changeOrigin: true })) app.listen(3001,() => { console.log('服务器已启动') }) 代码中通过http-proxy-middleware进行跨域代理,将/api请求代理到http://localhost:3000服务器上。 下面是UniApp中实现音乐搜索的示例代码: // index.vue
搜索
{{item.name}}
export default { data() { return { keyword: '', songList: [], }; }, methods: { async submit() { const res = await uni.request({ url: '/api/search', method: 'GET', data: { keyword: this.keyword, }, }); this.songList = res.data.response.songs; }, async play(id) { const res = await uni.request({ url: '/api/song', method: 'GET', data: { id, }, }); const audio = uni.createSelectorQuery().select('audio'); audio.src = res.data.response[0].url; audio.play(); }, }, }; 代码中通过uni.request方法获取到/api/search和/api/song两个API接口返回的数据,从而实现了音乐搜索功能。同时,也实现了将搜索结果列表中的音乐直接播放出来的功能。 结语本文介绍了如何在UniApp中实现音乐播放和音乐搜索功能。实现音乐播放功能需要注意安卓和iOS系统的差异性,而实现音乐搜索功能需要使用第三方API接口来获取音乐数据。希望本文能够对大家有所帮助。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |