JavaScript的“新音频”无法与AWS Cloudfront(CORS)结合使用

时间:2018-07-25 20:53:33

标签: javascript angularjs amazon-cloudfront

我有一个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个小时就想知道那是怎么回事。提防。

0 个答案:

没有答案