目录
前言
近期项目中有个类似开箱抽奖的需求,开始抽奖时播放抽奖音频,并渲染抽奖动画,抽奖结束的时候弹出获得的奖品。
一、Bug出现
电脑端、安卓手机端正常显示开箱效果以及声音,IOS端使用夸克无痕也正常。但是唯独使用IOS自带的Safari浏览器打开时,无法正常播放动画,并且点击之后无法点击其他按钮。由于身边没有IOS设备无法直接进行调试,只能一步一步进行盲猜排查。
二、兼容性排查
1.盲猜层级问题
此时还没有往音频方向进行排查,按照以往经验,点击后按钮页面上其他按钮就无法再次进行点击,只有刷新才可以,那么盲猜由于层级问题,导致其实奖励的弹窗已经正常弹出,但是由于某种原因导致被遮住了,增加兼容性代码,并给动画效果也增加兼容代码。
@-webkit-keyframes heart-bounce {
/* Safari 和旧版 Chrome */
from {
-webkit-transform: translateY(0); /* Safari 和旧版 Chrome */
transform: translateY(0);
}
to {
-webkit-transform: translateY(-224.5rem); /* Safari 和旧版 Chrome */
transform: translateY(-224.5rem);
}
}
结果:无效。
2.猜测音频路径问题
客户用mac打开获取到的报错信息。
此时猜测路径问题导致音频在IOS端无法获取到。
尝试将音频文件放置服务器,使用动态拼接的方式,获取音频链接:
const protocol = window.location.protocol;
const currentDomain = window.location.hostname; // 获取当前环境域名
const baseAssetUrl = `${protocol}//${currentDomain}/path/to/your/assets/music/`;
const loadAudio = (filename) => {
const audio = new Audio(`${baseAssetUrl}${filename}`);
return audio;
};
const homeIconAudio = loadAudio("openall.mp3");
// 在适当的时候播放音频
homeIconAudio.addEventListener('canplay', function() {
homeIconAudio.play();
});
结果:可以正常打印出地址,在浏览器中打开地址也能正常播放,但是线上版本一打开就直接报错,这次电脑端都无法正常使用了
3.搬救兵寻求帮助
这个时候已经测试出,出问题的地方,使用的音频,在苹果手机无法正常打开。
找了IOS端正常能播放的音频放上服务器之后,使用链接IOS端正常打开,通过多次测试发现,
该音频存在异常,并非代码问题-_-||。
以下为通义千问的解答:
总结
日常开发中遇到的坑无奇不有,从怀疑代码到怀疑音频的过程中,花费大量的时间进行排查,如果不是大佬提点,估计还得耗费大量时间进行排查,又或者链接IOS进行调试才发现bug。
以此文章记录此刻踩坑记录,以后使用音频切记提前检查音频是否存在损坏。