Why is this sound only displaying on chrome

问题

I'm displaying a sound when paypal captures an order and it gets approved. The problem is that the sound is only getting displayed on google chrome, only on computers. Not working in safari, neither in chrome devices. But it's more strange that It once worked on safari for mac, then, when i tried again, it stopped working and now it only works in chrome.

This is my code, thanks in advance:

<script>
paypal.Buttons({
    createOrder: function(data, actions) {
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create({
        application_context: {
                shipping_preference: 'NO_SHIPPING',
            },
        purchase_units: [{
          amount: {
            value: '1.99'
          }
        }]
      });
    },
onApprove: function(data, actions) {
      var bleep = new Audio();
      bleep.setAttribute("src", "static/payment_success.m4a");
      bleep.currentTime=0;
      bleep.play();

some more code.....
}).render('#paypal-button-container');
</script>

回答1:

You might check if there is some audio format supported with Audio.canPlayType and play it.

also good lecture

const container = document.querySelector("#container");

const audioFiles = [{
    mimeType: 'audio/opus',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.opus'
  },
  {
    mimeType: 'audio/mp4',
    src: 'https://filesamples.com/samples/audio/m4a/sample1.m4a'
  },
  {
    mimeType: 'audio/wav',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.wav'
  },
  {
    mimeType: 'audio/mpeg',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3'
  },
  {
    mimeType: 'audio/ogg',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.ogg'
  },
  {
    mimeType: 'audio/aac',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.aac'
  },
  {
    mimeType: 'audio/ac3',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.ac3'
  },
  {
    mimeType: 'audio/aiff',
    src: 'https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.aiff'
  }
]

const map = {
  probably: 2,
  maybe: 1
}

container.addEventListener("click", async() => {
  var bleep = new Audio();

  let verifiedAudioFiles = audioFiles.map(pr => ({
    ...pr,
    canPlay: bleep.canPlayType(pr.mimeType)
  }))

  verifiedAudioFiles.sort((prev, next) => (map[next.canPlay] || 0) - (map[prev.canPlay] || 0));

  console.log(verifiedAudioFiles);

  for(let {src, mimeType} of verifiedAudioFiles) {
    try {
      bleep.setAttribute("src", src);
      bleep.currentTime = 0;
      await bleep.play();
      console.log(`playing with mime type ${mimeType}`);
      break;
    } catch (error) {
      console.log(error);
      continue;
    }
  }

})

html,
body {
  height: 100%;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  font-size: 2rem;
}

<div id="container">Press anywhere to play</div>

来源：https://stackoverflow.com/questions/62235432/why-is-this-sound-only-displaying-on-chrome

标签

javascript

audio

safari