微信网页audio标签无法正常播放音频

        先简单说一下笔者遇到的情况,方便其他人员确认是否符合自身需要,项目需要做一个微信公众号活动,要求用户上传音频,然后为了减少播放器的麻烦,音频文件需要通过另外的转码服务器转成统一的mp3文件,然后再回传到项目服务器中播放(转码和服务器文件传递会在另外的文章记录),问题就在于转码之后mp3文件,在播放页面的audio标签中无法正常加载,如下图所示的这种情况:

代码其实就是普通的audio:

<audio src="/test/wyytest.mp3" controls="controls">
    Your browser does not support the audio element.
</audio>

这个播放页面,可以在普通的各种浏览器和PC端的微信打开,但是用手机的微信打开就存在不能加载资源的问题,笔者此时的微信版本是7.0.6(安卓),页面发给同学,结果他的微信可以打开,微信版本7.0.5(iphone 7P),最初怀疑是设备问题,后来各种百度之后没有解决问题,此时同学发来一条链接,里面提到作者遇到类似情况,最后发现是资源链接的http需要改为https,所以做了一下尝试,结果成功了,在此非常感谢同学和文章作者的帮助!特此记录一下遇到的问题,以便后续查阅学习。

这个是对比图:

参考文章链接:https://blog.csdn.net/MZ911118/article/details/89713369?tdsourcetag=s_pctim_aiomsg

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在微信小程序中点击播放音频,你可以使用`<audio>`标签和相应的事件监听来实现。以下是一个简单的示例代码,展示了如何在微信小程序中实现点击播放音频的功能: 在 wxml 文件中,添加以下代码: ```html <!-- 播放按钮 --> <button bindtap="playAudio">播放</button> <!-- 音频组件 --> <audio id="audio" src="{{ audioSrc }}" bindplay="onPlay" bindpause="onPause"></audio> ``` 在 js 文件中,添加以下代码: ```javascript Page({ data: { audioSrc: '音频地址', isPlaying: false }, // 播放按钮点击事件 playAudio() { const audio = this.selectComponent('#audio'); if (this.data.isPlaying) { audio.pause(); } else { audio.play(); } }, // 音频播放事件 onPlay() { this.setData({ isPlaying: true }); }, // 音频暂停事件 onPause() { this.setData({ isPlaying: false }); } }); ``` 请将`音频地址`替换为你要播放的实际音频地址。当点击播放按钮时,会触发`playAudio`方法,在该方法中判断当前是否正在播放音频,如果是,则暂停音频;如果不是,则播放音频。同时,通过`bindplay`和`bindpause`事件监听,当音频开始播放和暂停时,会触发相应的事件处理函数`onPlay`和`onPause`,在这些函数中可以根据需要进行相关操作,比如更新播放状态。 这样就可以实现点击播放音频的功能了。当点击播放按钮时,音频会开始播放;再次点击播放按钮,则会暂停音频播放
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值