小程序自定义video，audio

最新推荐文章于 2024-07-16 16:38:55 发布

firefox丶ddk

最新推荐文章于 2024-07-16 16:38:55 发布

阅读量539

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/firefoxddk/article/details/88535224

针对微信小程序中audio组件存在的播放延迟及图片显示问题，本文详细介绍了如何自定义音视频组件，通过判断资源类型（MP3或MP4）来分别展示自定义音频组件或video组件，确保音视频内容的流畅播放和正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求是当为视频的时候正常显示为MP3的时候也正常显示，audio组件会出现点击播放延迟10s以上和图片不显示等一系列情况，所以决定自己写。判断接口地址为MP3或者MP4分别展示video和自己写的audio

在这里插入图片描述

<view style='padding-top:{{statusBarHeight + titleBarHeight}}px;height:100%;background-color:#f2f2f2;position:reletive'>
    <!-- audio -->
    <view wx:if="{{yinpin}}" style='padding-bottom:30rpx;background:black'>
       <!--当前为停止状态  -->
        <view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==false}}" bindtap='play'>
        <image style="width:100%;height:100%;border-radius:50%;" src='{{poster}}' />
        <image src='/images/start.png' style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
        </view>
        <!--当前为播放状态  -->
        <view style="width:250rpx;height:250rpx;left:250rpx;top:12rpx;position:relative;" wx:if="{{isplay==true}}" bindtap='stop'>
        <image style="width:100%;height:100%;border-radius:50%;" src='{{poster}}' />
        <image src='/images/stop.png' style="width:100rpx;height:100rpx;position:absolute;left:75rpx;top:75rpx;"></image>
        </view>
    
    </view>
    <!-- video -->
    <video wx:if="{{shipin}}" id="myVideo" class="myVideo" src="{{shipindizhi}}" controls="true" custom-cache="{{true}}">
</video>

js
const myaudio = wx.createInnerAudioContext();
Page({
  data: {
    isplay: false,//是否播放
    audio:'',
    yinpin:false,
    shipin:false,
    shipindizhi:''
  },
    //播放
    play: function () {
		myaudio.play();
        console.log(myaudio.duration);
        this.setData({ isplay: true });
    },
    // 停止
    stop: function () {
        myaudio.pause();
        this.setData({ isplay: false });
    },
  onLoad: function(options) {
    wx.showLoading({
      title: '加载中'
    })
    app.request({
      url: buz_base + buz_path.course_content + `&eid=${options.id}`,
      success: res => {
        if (res.data.code) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        } else {
          this.setData({
            audio: res.data.data.current.section.resource,
              yinpin: res.data.data.current.section.resource.indexOf('.mp3') != -1 ? true : false,
              shipin: res.data.data.current.section.resource.indexOf('.mp3') != -1 ? false : true,
              shipindizhi: res.data.data.current.section.resource.indexOf('.mp3') != -1 ? '' : res.data.data.current.section.resource
          })
            if (res.data.data.current.section.resource.indexOf('.mp3') != -1) {
                myaudio.src = res.data.data.current.section.resource
            } 
        }
      },
      fail: res => wx.showToast({
        title: '网络异常',
        icon: 'none'
      }),
      complete: wx.hideLoading
    })
  },
  onReady: function () {
    this.audioCtx = wx.createAudioContext('myAudio');
  }
})

主要是onload的setdata里的判断和微信小程序的api
图片去阿里图片库找2个48的图就行
这样写，当前页面退出的时候播放的音频还是会播放，所以

  onUnload :function(){
      this.stop()
  },

就ok了