HTML5音频标签播放，但控件未按预期工作

因此，音频标签的工作原理和播放音频很好，但搜索/导航不起作用。它不伴随音频传播，您不能在播放器中搜索/导航。这是它看起来像一个1分钟和23秒的音频剪辑：HTML5音频标签播放，但控件未按预期工作

另外，当玩家完成，时间/持续时间关闭。我不知道如何解释它。这是什么样子后：

这是玩家的代码：我从来没有真正与<audio>标记之前曾

<audio controls preload="auto"> 
    <source src="https://third.party.com/file.mp3" type="audio/mpeg"> 
</audio>

，所以可能有细微差别我我错过了，但它看起来非常直截了当。我错过了什么吗？

编辑 - 更多信息

我添加了一个JSFiddle。此外，这看起来会发生在较长的音频剪辑中，因此这可能与带宽有关。当剪辑是几秒钟（< 10秒）时，大部分时间似乎都能正常工作。

来源

2016-06-10 Andrew

是做什么用的浏览器来得到那个奇怪的行为？你有没有尝试其他浏览器（只是为了看看它是否与浏览器有关）？您是否尝试过使用不同的mp3来源（只是为了确定原因不是损坏的mp3）？ –

你可以将它加入小提琴中，以便我们自己看到它吗？ –

@LouysPatriceBessette - 我已经尝试了不同的浏览器，同样的事情。使用JSFiddle链接和使用的URL更新了最初的帖子（这是一个Twilio API录制）。 – Andrew

如果更改的preload到'none'，而不是'auto'它工作正常

见fiddle或运行片断

<audio controls preload="none"> 
 
    <source src="https://api.twilio.com/2010-04-01/Accounts/ACaa255ecd514b787c2f0358486f07a106/Recordings/REf5c1e1f1e048894182132ba0ce763183.mp3" type="audio/mpeg"> 
 
</audio>

来源

2016-06-10 17:45:28

它仍然不能解释'汽车'的奇怪行为，我授予你，但它的工作原理！ –

它似乎只适用于短于5分钟左右的音频剪辑。以上任何问题都有相同的问题。这当然给了我在哪里看如何解决它的好方向。 – Andrew

@Andrew我刚刚尝试了一个超过10分钟的声音文件，它的工作原理非常完美https://jsfiddle.net/RachGal/qxhrtwza/您的问题很可能是由twilio api中的错误引起的，而不是任何与音频文件或标签 –

我发现那位此提示here：

注意预加载取代最新的HTML5规范中的自动缓冲器。之前的autobuffer采用了一个布尔值来指定是否要提前缓冲文件。目前，浏览器正在从autobuffer转换到预加载，所以我们建议您暂时使用这两个属性。

所以你应该用这个来强制预加载。

<audio controls preload="auto" autobuffer>

见updated fiddle

来源

2016-06-10 19:42:58

好主意，但它似乎也不工作。我想这可能是因为我正在同一页面中加载多个音频剪辑。 – Andrew

我就遇到了这个不知道是怎么回事，并寻找答案花了几个小时。我的MP3文件长度超过30分钟，在Firefox上，MP3控件运行良好，但在Chrome中我无法使搜索/前向控制正常工作。

尝试此页的JSFiddles和调试后，我发现HTML5代码不是问题。所以我遵循一种通过我的ruby on rails后端“send_file”函数来服务MP3的方法，并最终在Chrome上工作。我添加了“/ stream”路由，并在其控制器中返回了send_file函数。就像这样：

send_file path_to_MP3_file, 
    filename: File.basename(path_to_MP3_file), 
    type: Mime::Type.lookup_by_extension("mp3"), 
    disposition: 'inline', 
    stream: true, 
    buffer_size: 4096

我不得不对注册为“lookup_by_extension”方法工作的初始化文件的MP3 MIME类型，所以我用：

Mime::Type.register "audio/mpeg", :mp3

现在，我坚持努力让控件在iOS中运行，但这是另一回事。

由于没有在iOS浏览器的时间轴控制是专门涉及到组件的宽度：如果我得到它正在为移动版:)

UPDATE我会发布更新。强制它的最小宽度做了这项工作，但是在窄设备（如iPhone 5）中搞乱了设计。

我最终改变我的CSS，迫使一些webkit-pseudo-elements和造型，以这样的：

audio { 
    width: 100%; 
    min-width: 280px; 
    } 

    audio::-webkit-media-controls-timeline { 
    display: inline; 
    } 

    audio::-webkit-media-controls-current-time-display { 
    display: flex; 
    }

来源

2016-12-15 07:29:44 tonklis

HTML5音频标签播放，但控件未按预期工作

回答

相关问题