Html5 音频未在 iPhone ionic 5 中首次加载答案

【问题标题】：Html5 audio does not loading first time in iPhone ionic 5Html5 音频未在 iPhone ionic 5 中首次加载
【发布时间】：2023-03-24 18:50:01
【问题描述】：

我在 IONIC 5 中使用 HTML 5 音频来播放音频。我不使用 HTML 音频控件。我使用离子范围创建自己的控件搜索栏。一个离子应用程序在 android 中按预期运行，但在 iPhone 中产生了问题。当我在 iPhone 上部署应用程序时，音频第一次没有加载。当用户访问应用程序的另一个页面然后移动到音频页面时，它会按预期加载音频。我的 HTML 标签是

<audio id="{{i}}" class="audio" playsinline>
        <source src="{{music.url}}" type="audio/mp3">
      </audio>

我在 ionViewWillEnter 中获取音频持续时间，并尝试使用 ionViewDidLoad 但得到相同的错误。我怎样才能解决这个问题。请看我的ts代码。

ionViewWillEnter() {
    this.utils.showLoading('please wait...');
    setTimeout(() => {
      this.utils.hideLoading();
      this.musicList.forEach((music, index) => {
        var audio: any = document.getElementById((index);
        music.duration = this.calculateDuration(audio.duration);
        music.maxRange = audio.duration;
      });
    }, 1000);
  }

【问题讨论】：

标签： ios ionic-framework ionic4 html5-audio

【解决方案1】：

问题在于您不知道音频是否已准备好播放。您只需设置 1 秒的加载时间，假设它就足够了，但实际上并非如此。

查看媒体事件文档。您需要创建一个侦听器/覆盖canplaythrough 事件，以便知道音频何时加载到浏览器上。

你的情况是这样的

//it's better to use viewDidLoad in your case because it only runs on the page instatiation
async ionViewDidLoad() {
  await this.utils.showLoading('please wait...'); //remember loading instantiations and presentation returns a promise
  
  const MAX_WAIT = 10000 //maximum wait time in ms
  const loadings = []

  this.musicList.forEach((music, index) => {
    const audio: any = document.getelementById(index)
    const p = new Promise((resolve, reject) => {
      // creating a timeout handler
      const timeoutHandler = setTimeout(() => {
        const errorMsg = `Timeout waiting audio ${index} to load/buffer` 
        console.error(errorMsg)
        reject(new Error(errorMsg))
      }, MAX_WAIT)
      
      // overriding the oncanplaythrough event handler
      audio.oncanplaythrough = (event) => {
        music.duration = this.calculateDuration(audio.duration);
        music.maxRange = audio.duration;

        console.log(`audio ${index} is loaded and buffered enough to play without interruptions`)
        clearTimeout(timeoutHandler) //clearing the timeout handler
        resolve()
      }
    })

    // pushing the loading the promise arrays
    loadings.push(p)
  })

  //waiting all audios to load
  Promise.all(loadings).then(()=> {
    console.log('all audios loaded')
    this.utils.hideLoading()
  }).catch((error)=> {
    this.utils.hideLoading()
    console.error('error loading some files')
  })

}

【讨论】：