HTML5 Audio tag on Safari has a delay

后端 未结 9 599
無奈伤痛
無奈伤痛 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)
提交回复
热议问题