我有一个AngularJs应用,用户Pusher(https://pusher.com/)可以从后端服务接收通知。收到通知后,将播放简短的“哔哔”声。
问题是,当我通过Chrome浏览器上的localhost运行此代码时,此蜂鸣声有效,但是当我访问AWS CloudFront URL时却无法奏效。
通过AWS CloudFront播放时,JavaScript的新音频(...)的工作方式是否有所不同?
var pusher = null,
channel = null,
beep = new Audio('https://s3.amazonaws.com/myawsbucket/sounds/beep1.mp3');
// Firebase Auth's on State Change
// Register to pusher notification channel when user logs in
Auth.$onAuthStateChanged(function (currentUser) {
// If desktop version, use pusher to receive notifications
if (currentUser && !VersioningService.isApp()) {
if (!pusher) {
// register a pusher instance
pusher = new Pusher(PUSHER_KEY, {
"cluster": "us2",
"encrypted": true
});
}
if (!channel) {
// register to a pusher channel and listen for notifications
console.log("Subscribing to " + currentUser.uid);
channel = pusher.subscribe(currentUser.uid);
channel.bind('notification', function (data) {
// create two copies so you can play it twice back to back
var copyOfBeep = beep.cloneNode(),
copyOfBeep2 = beep.cloneNode();
try {
// This makes a sound on my local, but does not when hosted from cloudfront
copyOfBeep.play();
setTimeout(function () {
copyOfBeep2.play();
}, 400)
} catch (e) {
console.log(e);
}
});
}
}
});
**更新**
问题是URL传递到了新的Audio(...)。即使未在控制台中引发错误,也一定是CORS错误。将URL更改为适当的CloudFront URL可以解决问题。
**更新2 **
像Chrome扩展程序之类的禁用HTML5自动播放功能也会关闭声音。仅仅花了大约3个小时就想知道那是怎么回事。提防。