微信小程序播放音频方法,解决uniapp 微信小程序不能播放本地音频的方法

 微信小程序播放音频方法,解决uniapp 微信小程序不能播放本地音频的方法,编译后将这段代码赋值到微信小程序,同时赋值整个audio文件夹到微信开发工具目录中

    const play = (name) => {
      console.log('play :' + name)
      let music =  wx.createInnerAudioContext({
        useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动,默认关闭。对于短音频、播放频繁的音频建议开启此选项,开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长,因此对于长音频建议关闭此选项
      })
      music.autoplay = false
      music.tilte = 'boom.mp3'
      music.src = 'audio/' + name
      music.onPlay(() => {
        console.log('开始播放:' + name)
      })
      music.onError((res) => {
        console.log('播放errMsg:' + res.errMsg)
        console.log('播放errMsg:' + res.errCode)
      })
      music.onEnded((res) => {
        console.log('销毁:')
        music.destroy()
      })
      music.play()
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,能够编译到 iOS、Android、Web(包括微信小程序)以及各种 H5 应用等平台。当涉及到微信小程序时,uni-app 提供了丰富的API和组件,使得开发者能够方便地实现包括音频播放在内的各种功能。 微信小程序音频样式主要是指如何通过小程序的界面和交互设计来展示音频播放的控制和信息。通常,音频样式包括以下几个方面: 1. 播放器的界面布局:这是用户接触的第一层面,通常包括播放/暂停按钮、进度条、声音大小控制、当前播放时间显示以及总时长显示等。开发者可以使用微信小程序提供的组件如 `<audio>` 来实现。 2. 自定义样式:开发者可以使用 CSS 对 `<audio>` 组件进行样式定制,包括颜色、大小、位置以及响应式布局等,以满足不同的设计需求。 3. 交互设计:合理的用户交互设计可以提升用户体验,比如点击封面图可以直接播放音频、长按播放按钮显示更多操作选项等。 微信小程序中,音频组件的使用示例代码如下: ```html <template> <view> <audio id="myAudio" src="your-audio-src.mp3" controls="true" controlsList="nodownload" autoplay="false" loop="false" initial-time="0" preload="auto" poster="your-poster-image.jpg" ></audio> </view> </template> ``` 在上述代码中,`<audio>` 组件用于嵌入音频内容,`src` 属性设置音频文件的 URL,`controls` 属性决定是否显示默认播放控件。`controlsList` 和 `preload` 等属性提供更细粒度的控件定制和播放行为设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值