2021-08-31JSP项目中,audio标签 IOS端无法播放音频

JSP 同时被 2 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅

目录

你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

背景

老项目(JSP)维护,新增了语音播放功能,要兼容IOS和安卓,在微信端。

如何实现

最简单的实现形式:

<audio src="${rsp}/resources/sounds/xxxx.mp3" id="sound_bgm" preload="auto" autoplay="autoplay" loop="loop"></audio>

audio标签属性:

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮
looploop如果出现该属性,则每当音频结束时,重新开始播放
mutedmuted规定视频输出应该被静音
preloadpreload如果出现该属性,则音频在页面加载时,继续进行加载,并预备播放。如果使用了"autoplay"则忽略该属性
srcurl要播放的音频的URL

width/high-配合controls后可以在页面显示音频组件,可用于日常调试使用。

其他项目中的实现形式

参考链接:vue项目,解决ios下audio无法播放问题

遇到问题:IOS端无法播放而安卓端和PC端一切正常

先把音频组件放开,查看是不是音源的问题!!!
引入的音频文件,比如原文件是m4a格式,手动改后缀后,PC和安卓端可用,但是苹果端是不可用的!
第一次见到时,以为是IOS的兼容性问题,导致无法播放音频。
于是开始寻找兼容性方法去解决。
在网上找到,IOS和微信浏览器已经阻止了audio等标签的autoplay事件。需要用户在click事件或者touch事件执行audio.play()才能播放。
ajax回调中的audio.play()音乐也不能正常播放。

// 预先加载资源
this.$refs.audio.load(); //IOS9以后
if(this.isIOS()){
	this.$refs.audio.play();
	this.$refs.audio.pause();
}
// ajax成功后的事件
this.$refs.audio.pause();
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();
在微信浏览器环境下
function autoPlay(id){
	var audio = document.getElementById(id);
	audio.play();
	document.addEventListener("WeixinJSBridgeReady", function(){
	audio.play();
}, false)
	document.addEventListener("YixinJSBridgeReady",function(){
	audio.play()
}, false)
}
autoPlay('music')

参考链接:
1.https://www.jb51.net/article/129503.htm
2.

引用文本

上文中,引入了错误的音源。
错误音源未播放
点击播放按钮后
正常音频

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

huananzhici

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值