发表新帖
发表新帖

HTML5 Audio tag on Safari has a delay

后端 未结
关注
9 590
無奈伤痛
無奈伤痛 2020-11-27 18:50

I\'m trying to accomplish a simple doodle-like behaviour, where a mp3/ogg sound rings on click, using the html tag. It is supposed to work under Firefox, Safari and Safari

相关标签:
9条回答
  • 暗喜
    2020-11-27 19:01

    On desktop Safari, adding AudioContext fixes the issue:

    const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

    I found out by accident, so I have no idea why it works, but this removed the delay on my app.

    0 讨论(0)
  • 醉梦人生
    2020-11-27 19:01

    Same issue. I tried to preload it via different ways. Finally I wrapped animation logic to "playing" callback. So this logic should work only if file loaded and playing started, but as a result I see that animation logic already started, and audio playing with around 2 seconds delay. It's braking my mind, how it can has delay if audio already called "playing" callback?

    Audio Context resolved my issue. The simplest example I found here https://developer.mozilla.org/en-US/docs/Web/API/Body/arrayBuffer getData - preparing your audio file; then you can play it with source.start(0);

    This link missed how to get audioCtx you can copy it here let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    0 讨论(0)
  • 予麋鹿
    2020-11-27 19:08

    Apple decided (to save money on celluar) to not pre-load <audio> and <video> HTML elements.

    From the Safari Developer Library:

    In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

    This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">

    This does nothing on iOS: <body onLoad="document.myMovie.play()">

    I don't think you can bypass this restriction, but you might be able to.

    Remember: Google is your best friend.

    Update: After some experimenting, I found a way to play the <audio> with JavaScript:

    var vid = document.createElement("iframe");
vid.setAttribute('src', "http://yoursite.com/yourvideooraudio.mp4"); // replace with actual source
vid.setAttribute('width', '1px');
vid.setAttribute('height', '1px');
vid.setAttribute('scrolling', 'no');
vid.style.border = "0px";
document.body.appendChild(vid);

    Note: I only tried with <audio>.

    Update 2: jsFiddle here. Seems to work.

    0 讨论(0)
  • 鱼传尺愫
    2020-11-27 19:08

    I am having this same issue. What is odd is that I am preloading the file. But with WiFi it plays fine, but on phone data, there is a long delay before starting. I thought that had something to do with load speeds, but I do not start playing my scene until all images and the audio file are loaded. Any suggestions would be great. (I know this isn't an answer but I thought it better that making a dup post).

    0 讨论(0)
  • 说谎
    2020-11-27 19:10

    your audio files are loaded once then cached.. playing the sounds repeatedly, even after page refresh, did not cause further HTTP requests in Safari..

    i just had a look at one of your sounds in an audio editor - there was a small amount of silence at the beginning of the file.. this will manifest as latency..

    is the Web Audio API a viable option for you?

    0 讨论(0)
  • 孤街浪徒
    2020-11-27 19:13

    Unfortunately, the only way to make it work properly in Safari we need to use WebAudio API, or third-party libs to handle this. Check the source code here (it's not minified)
    https://drums-set-js.herokuapp.com/index.html
    https://drums-set-js.herokuapp.com/app.js

    0 讨论(0)
 看不清?
提交回复
热议问题