javascript - 为什么只在Chrome上显示此声音

Question

当 Paypal 捕获订单并获得批准时，我正在显示声音。问题在于，声音只会在Google Chrome上显示，而只能在计算机上显示。不能在Safari中使用，也不能在chrome设备中使用。但是更奇怪的是，它曾经在Mac的safari上工作，然后，当我再次尝试时，它停止工作，现在仅在chrome上工作。

这是我的代码，在此先感谢:

<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>

Answer 1

您可以检查Audio.canPlayType是否支持某些音频格式并进行播放。

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>