safari audio target.duration infinity 获取不到音频文件时长

• 2020年5月9日 18:29

  • 遇到问题：

    • 自从上面那样改后：把文件转成mp3文件，
    • 还是发现，在 IOS safari 上，还是不能获得 audio.maxTime

  • 且安装了 sox 软件 用于查看音频的元信息

    • brew install sox

    > soxi 01.mp3                                                                                          
    
    Input File     : '01.mp3'
    Channels       : 1
    Sample Rate    : 44100
    Precision      : 16-bit
    Duration       : 00:10:48.80 = 28612212 samples = 48660.2 CDDA sectors
    File Size      : 5.19M
    Bit Rate       : 64.0k
    Sample Encoding: MPEG audio (layer I, II or III)
    

    • 文件是有元信息的，不是音频文件问题

  • 还是发现，在 IOS safari 上，还是不能获得 audio.maxTime

  • 问题预估：

    • 1.可能是文件太大了，IOS Safari 不支持太大的文件
    • 2.服务器的问题

  • google 搜索： safari audio target.duration infinity

  • 解决问题：

    • Safari 和 Chrome浏览器等其他浏览器不同
    • Safari 遇到audio时
      • Safari发出了两个请求：
      • 第一次请求会形如（Range: bytes=0-1)，只是尝试获取一些字节. 如果服务端没有根据这个请求返回相应的字节内容，那么safari就不会帮你解析下一个请求拿回来的全量音频数据，失去一系列audio标签的功能特性, 则Safari 会出现 audio target.duration = infinity
    • 在 服务端

      	var mp3 = path.resolve('./uploadFile/' + ctx.params.filename)
      
          ctx.set({
              'Content-Type': 'audio/mpeg',
              'Content-Length': fs.statSync(mp3).size,
          })
      
          if (ctx.headers.range === 'bytes=0-1') {
              ctx.set('Content-Range', `bytes 0-1/${fs.statSync(mp3).size}`)   // 重点在这
              ctx.body = '1'
          } else {
              ctx.set({
                  'Accept-Ranges': 'bytes',
              })
              const src = fs.createReadStream(mp3)
              ctx.body = src
          }
      

    • 这样处理之后，Safari 就能读取到 audio duration 了

  • 参考文章:

    • H5音频处理——踩坑之旅 【CSDN】
    • Safari audio file duration = infinity – how to fix? 【stackoverflow】