admin管理员组

文章数量:1130349

当微信小程序官方提供的 audio 组件样式不满足我们的需求时，我们可以自定义一个音频播放器，由于不可抗力原因，我用uView框架中的 Popup 弹出层 实现了一个音频播放器弹框，大家根据需求做参考就好啦，话不多说，直接看效果吧～

1、效果图：暂停&播放

    

2、具体实现

 2.1 准备按钮图片

2.2 使用组件

ps：下面代码中用到的示例mp3文件地址是从网上随便找的，如有侵权联系我删除，谢谢。

<template>
  <MyAudio ref="myAudio" :show.sync="showAudio"/>
</template>

<script>
import MyAudio from "@/components/MyAudio";
export default {
  components: {
    MyAudio
  },
  data() {
    return {
      showAudio: false,
      path: 'http://music.163/song/media/outer/url?id=447925558.mp3'
    }
  },
  onLoad(options) {
    this.showAudio = true
    this.$refs.myAudio.init(this.path)
  }
}
</script>
2.3 封装MyAudio组件
2.3.1 MyAudio.vue 文件
<template>
  <u-popup
    :show="show"
    mode="center"
    :closeable="true"
    :safeAreaInsetBottom="false"
    round="16rpx"
    @close="clickMask"
  >
    <view &

当微信小程序官方提供的 audio 组件样式不满足我们的需求时，我们可以自定义一个音频播放器，由于不可抗力原因，我用uView框架中的 Popup 弹出层 实现了一个音频播放器弹框，大家根据需求做参考就好啦，话不多说，直接看效果吧～

1、效果图：暂停&播放

    

2、具体实现

 2.1 准备按钮图片

2.2 使用组件

ps：下面代码中用到的示例mp3文件地址是从网上随便找的，如有侵权联系我删除，谢谢。

<template>
  <MyAudio ref="myAudio" :show.sync="showAudio"/>
</template>

<script>
import MyAudio from "@/components/MyAudio";
export default {
  components: {
    MyAudio
  },
  data() {
    return {
      showAudio: false,
      path: 'http://music.163/song/media/outer/url?id=447925558.mp3'
    }
  },
  onLoad(options) {
    this.showAudio = true
    this.$refs.myAudio.init(this.path)
  }
}
</script>
2.3 封装MyAudio组件
2.3.1 MyAudio.vue 文件
<template>
  <u-popup
    :show="show"
    mode="center"
    :closeable="true"
    :safeAreaInsetBottom="false"
    round="16rpx"
    @close="clickMask"
  >
    <view &

本文标签： 播放器自定义程序微信小

版权声明：本文标题：微信小程序自定义播放器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1754991323a2751250.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。