如何使用vue3+uni-app封装音乐播放插件

 更新时间:2023年11月22日 15:12:28   作者:Destinynever  
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下

1、初始化一个音乐实例

let AUDIO = ''
export const initAudio = function (url) {
  AUDIO = uni.createInnerAudioContext()
  AUDIO.src = url

  return AUDIO
}

2、将这个初始化的方法添加到全局

 app.config.globalProperties.initAudio = initAudio    // main.ts/js 文件中

3、封装组件写好样式

<view class="audio-play">
    <view class="audio-background"></view>
    <img class="controls" @click="playAudio" :src="data.isPlay ? data.pauseIcon : data.playIcon" alt="" />
    <view class="progress-container">
      <view class="playTime">{{ formatTime(data.playTime) }}</view>
      <!-- value的总数是100  通过value控制进度条进度 直到最后19/19*100就是进度条满了 强行进度条总数规定成100 -->
      <slider class="progress" block-size="10" block-color="#69bfbe" activeColor="#ffffff" backgroundColor="#119b9a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />
      <view class="totalTime">{{ data.totalTime }}</view>
    </view>
  </view>

4、调用我们放在全局的init方法

import { reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any

通过proxy 可以在vue3中那个我们配置在全局的方法

let a = proxy.initAudio('音频地址')

此时a就是我们获取到的音频实例,并且设置了我们需要播放的音频链接

5、接下来就是我们可能用到的一些API的介绍

startTime                开始播放的位置
autoplay      是否自动开始播放,默认为false
loop是否循环播放,默认为false
duration                当前音频的长度是通过src中音频返回的,需要在onCanplay中获取
currentTime       当前音频的播放位置
paused当前是否为暂停或停止状态 true为暂停或停止,false表示正在播放

6、需要使用到的方法

play播放
pause暂停
seek跳转到指定位置 s
onCanplay音频可以进入播放状态
stop停止

7、创建音频

这一步设置一些关于播放的配置,例如是否自动播放,但是最重要的是获取我们时长,但是我在使用的时候发现直接获取duration的时候无法成功获取到,通过百度发现了下面的方法,通过设置定时器。

// 创建音频
const createAudio = function () {
  a.autoplay = false
  a.onCanplay(() => {
    let intervalID = setInterval(function () {
      if (a.duration !== 0) {
        console.log(a.duration, '测试')
        // 设置总时长
        data.totalTime = formatTime(a.duration)
        data.trueTime = a.duration
        clearInterval(intervalID)
      }
    }, 500)
  })
}

因为音乐播放时长的展示形式一般为 00:00 形式的,而我们获取的时长是以s为单位结束的所以还需要将时间进行格式化处理 

// 格式化时间 ---- (00:00的格式)
const formatTime = function (data: any) {
  let minute = ''
  let second = ''

  minute = `${Math.floor(data / 60)}`
  second = `${Math.floor(data % 60)}`

  if (minute.toString().length === 1) minute = `0${minute}`
  if (second.toString().length === 1) second = `0${second}`
  return `${minute}:${second}`
}

8、完成播放和暂停功能

定义一个方法用于控制音频的播放和暂停,isPlay是用于控制我们按钮切换的状态,playTime就是当前播放时长,trueTime也是总时长

// 播放和暂停
const playAudio = function () {
  if (data.isPlay) {
    if (data.trueTime > 0) {
      console.log('暂停')
      clearInterval(data.timeupdata)
      a.pause()
      data.isPlay = !data.isPlay
    }
  } else {
    console.log('播放')
    data.timeupdata = setInterval(() => {
      // 播放时长
      data.playTime += 1
      // 播放时长超过总时长(秒 )
      if (data.playTime >= data.trueTime) {
        // 不循环播放
        a.stop()
        data.isPlay = false
        data.playTime = 0
        clearInterval(data.timeupdata)

        // 循环播放
        // this.isPlay = false
        // this.playTime = 0
        // clearInterval(this.timeupdata)
        // this.playAudio()
      }
    }, 1000)
    a.play()
    data.isPlay = !data.isPlay
  }
}

9、进度条设置

直接使用uni-app的内置组件slider就可以实现进度条的效果

slider的value属性需要传的是数字,进度条的最大值为100

我们可以使用(data.playTime / data.trueTime) * 100 计算当前的时长

就是相当于将data.trueTime分成data.trueTime等份

<slider class="progress" block-size="10" block-color="#ffb218" activeColor="#ffffff" backgroundColor="#d27e4a" :value="(data.playTime / data.trueTime) * 100" @change="sliderChange" />

通过sidler的change的方法控制进度条的拖动,并且改变音乐的进度

这里的second将就是将总时长播放到百分之几赋值给second

// 控制进度条
const sliderChange = function (e: any) {
  console.log('value 发生变化:' + e.detail.value)
  //   直到进度条到达100的时候才能获得总时长
  const second = (e.detail.value / 100) * data.trueTime
  data.playTime = second
  // 跳转到某一秒
  a.seek(second)
}

总结 

到此这篇关于如何使用vue3+uni-app封装音乐播放插件的文章就介绍到这了,更多相关vue3 uni-app封装音乐播放插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue.js动态数据绑定学习笔记

    vue.js动态数据绑定学习笔记

    这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解Vue2.0之去掉组件click事件的native修饰

    详解Vue2.0之去掉组件click事件的native修饰

    这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue checkbox 全选 数据的绑定及获取和计算方法

    vue checkbox 全选 数据的绑定及获取和计算方法

    下面小编就为大家分享一篇vue checkbox 全选 数据的绑定及获取和计算方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue中用watch一次监听多个值变化的示例详解

    Vue中用watch一次监听多个值变化的示例详解

    在Vue中,watch 本身不能监听多个变量,但我们可以通过返回具有计算属性的对象然后监听该对象,从而实现一次性“监听多个变量”,本文给大家介绍了Vue中用watch一次监听两个值变化的示例,需要的朋友可以参考下
    2024-01-01
  • 基于Vue sessionStorage实现保留搜索框搜索内容

    基于Vue sessionStorage实现保留搜索框搜索内容

    这篇文章主要介绍了基于Vue sessionStorage实现保留搜索框搜索内容,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • Vue数组响应式操作及高阶函数使用代码详解

    Vue数组响应式操作及高阶函数使用代码详解

    这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vuex实现像调用模板方法一样调用Mutations方法

    vuex实现像调用模板方法一样调用Mutations方法

    今天小编就为大家分享一篇vuex实现像调用模板方法一样调用Mutations方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue下的elementui轮播图自适应高度问题

    vue下的elementui轮播图自适应高度问题

    这篇文章主要介绍了vue下的elementui轮播图自适应高度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue CLI4 Vue.config.js标准配置(最全注释)

    Vue CLI4 Vue.config.js标准配置(最全注释)

    这篇文章主要介绍了Vue CLI4 Vue.config.js标准配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue常用指令v-if与v-show的区别浅析

    Vue常用指令v-if与v-show的区别浅析

    v-if和v-show的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的,下面这篇文章主要给大家介绍了关于Vue常用指令v-if与v-show区别的相关资料,需要的朋友可以参考下
    2021-10-10

最新评论