UniApp实现音乐播放与音乐搜索的实现方法

UniApp实现音乐播放与音乐搜索的实现方法

UniApp是基于Vue.js框架的前端开发框架，可以实现一次开发，多端发布的效果。本文将介绍如何使用UniApp实现音乐播放和音乐搜索功能。

一、使用UniApp实现音乐播放

在UniApp中实现音乐播放功能的点睛之笔是H5播放器，使用H5播放器可以支持在APP、微信、支付宝小程序等多个平台上播放音乐。

需要注意的是，在使用H5播放器时要注意安卓和iOS系统的差异性，因为在安卓系统中音乐的播放需要通过muted属性来触发，而在iOS系统上则要通过用户手动操作才会有音乐播放。

下面是UniApp实现音乐播放功能的示例代码：

// index.vue
<template>
  <view>
    <audio @play="onPlay">
      <source src="{{audioUrl}}">
    </audio>
    <button @click="play">播放</button>
  </view>
</template>
<script>
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: '播放开始',
      });
    },
  },
};
</script>

代码中使用了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
<template>
  <view>
    <form @submit.prevent="submit">
      <input v-model="keyword"/>
      <button>搜索</button>
    </form>
    <ul>
      <li v-for="(item, index) in songList" :key="index" @click="play(item.id)">{{item.name}}</li>
    </ul>
  </view>
</template>
<script>
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();
    },
  },
};
</script>

代码中通过uni.request方法获取到/api/search和/api/song两个API接口返回的数据，从而实现了音乐搜索功能。同时，也实现了将搜索结果列表中的音乐直接播放出来的功能。

结语

本文介绍了如何在UniApp中实现音乐播放和音乐搜索功能。实现音乐播放功能需要注意安卓和iOS系统的差异性，而实现音乐搜索功能需要使用第三方API接口来获取音乐数据。希望本文能够对大家有所帮助。