Fix sound skipping frames in safari re-play

#1720

freesound/static/bw-frontend/src/components/player/audio-element.js

@@ -151,6 +151,7 @@ export const createAudioElement = parentNode => {
 
   audioElement.addEventListener('ended', () => {
     onPlayerTimeUpdate(audioElement, parentNode);
+    audioElement.currentTime = 0.0;
   })
 
   audioElement.addEventListener('pause', () => {

freesound/static/bw-frontend/src/components/player/player-ui.js

@@ -5,17 +5,14 @@ import { formatAudioDuration, playAtTime, getAudioElementDurationOrDurationPrope
 import { createIconElement } from '../../utils/icons'
 import { createAudioElement, setProgressIndicator, onPlayerTimeUpdate } from './audio-element'
 import { rulerFrequencyMapping } from './utils'
+import { isDesktopMacOSWithSafari, isTouchEnabledDevice } from '../../utils/browser'
 
 const removeAllLastPlayedClasses = () => {
   document.getElementsByClassName('last-played').forEach(element => {
     element.classList.remove('last-played');
   });
 }
 
-const isTouchEnabledDevice = () => {
-  return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
-}
-
 if (isTouchEnabledDevice()){
   document.addEventListener('click', (evt) => {
     /* In touch devics, make sure we remove the last-played class when user touches
@@ -223,7 +220,19 @@ const createPlayButton = (audioElement, playerSize) => {
       if (simultaneousPlaybackDisallowed() || evt.altKey){
         stopAllPlayers();
       }
-      audioElement.play()
+      if (isDesktopMacOSWithSafari()){
+        // In some "oldish" macs with safari there is an issue in which re-playing a sound that has already been played results in
+        // the first few milliseconds of the sound being skipped. To avoid this, we reload the audio element before playing
+        // again. This means that the sound is loaded again from the server. This is not ideal but it's the only way to
+        // get around this issue. The check of isDesktopMacOSWithSafari() is not perfect because it also includes newer macs, but 
+        // it is useful to filter out most of the case in which this issue does not happen.
+        const previousCurrentTime = audioElement.currentTime;
+        audioElement.load()
+        audioElement.currentTime = previousCurrentTime;
+        audioElement.play()
+      } else {
+        audioElement.play()
+      }
     }
     evt.stopPropagation()
   })
@@ -704,4 +713,4 @@ const createPlayer = parentNode => {
 }
 
 
-export {createPlayer, isTouchEnabledDevice};
+export {createPlayer};

freesound/static/bw-frontend/src/components/player/utils.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import {createPlayer, isTouchEnabledDevice} from './player-ui'
+import {createPlayer} from './player-ui'
 
 export const simultaneousPlaybackDisallowed = () => {
   return document.cookie.indexOf('disallowSimultaneousAudioPlayback=yes') > -1;
@@ -109,3 +109,4 @@ var y_min = Math.log(100.0) / Math.LN10;  // See utils.audioprocessing.processin
 var y_max = Math.log(22050.0) / Math.LN10;
 for (var y = 500;y >= 0; y--)
   rulerFrequencyMapping.push(Math.pow(10.0, y_min + y / 500.0 * (y_max - y_min)));
+

freesound/static/bw-frontend/src/utils/browser.js

@@ -0,0 +1,20 @@
+import { UAParser } from 'ua-parser-js';
+
+const { browser, cpu, device } = UAParser(navigator.userAgent);
+
+const isIPad = () => {
+  return device.model === 'iPad';
+}
+
+const isSafari = () => {
+  return browser.name === 'Safari';
+}
+
+export const isTouchEnabledDevice = () => {
+  return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))
+}
+
+export const isDesktopMacOSWithSafari = () => {
+    return isSafari() && !isTouchEnabledDevice();
+}
+

package.json

@@ -42,6 +42,7 @@
     "lodash.throttle": "^4.1.1",
     "normalize.css": "^8.0.1",
     "regenerator-runtime": "^0.13.3",
+    "ua-parser-js": "^1.0.37",
     "whatwg-fetch": "^3.0.0"
   }
 }