IOS端Bug排查记录

前言

近期项目中有个类似开箱抽奖的需求，开始抽奖时播放抽奖音频，并渲染抽奖动画，抽奖结束的时候弹出获得的奖品。

一、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。

以此文章记录此刻踩坑记录，以后使用音频切记提前检查音频是否存在损坏。