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音頻標籤播放，但控件未按預期工作

回答

相關問題