为什么这个声音只显示在镶边上

Question

当PayPal捕获订单并获得批准时，我会显示声音。问题是声音只显示在谷歌浏览器上，只显示在电脑上。在野生动物园中不起作用，在Chrome设备中也不起作用。但更奇怪的是，它曾经在 mac 的野生动物园上运行，然后，当我再次尝试时，它停止工作，现在它只能在 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是否支持某些音频格式并播放它。

也好讲

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>