在 iOS 5 HTML5 应用程序中通过 javascript 事件播放声音

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7856502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 01:32:56  来源:igfitidea点击:

Play a sound via javascript event in iOS 5 HTML5 app

javascriptjquerymobile-safariios5

提问by crockpotveggies

Developing an HTML 5 application on new iPad's Mobile Safari iOS 5 that displays a user prompt when a "dispatch" is received. To bring attention to the user, we have a sound that plays like this when a alert function is called:

在新 iPad 的 Mobile Safari iOS 5 上开发 HTML 5 应用程序,在收到“调度”时显示用户提示。为了引起用户的注意,我们在调用警报函数时播放这样的声音:

snd.src = snd.src;
snd.play();

Unfortunately, Apple changed the methodology for playing sounds. Does anyone know if there are updates in iOS 5 that fixes this?

不幸的是,Apple 改变了播放声音的方法。有谁知道 iOS 5 中是否有更新可以解决这个问题?

*Did a lot of research and already aware that the old "hack" in iOS 3 no longer works.

*进行了大量研究,并且已经意识到 iOS 3 中的旧“hack”不再有效。

回答by Josiah

The sounds require user input in iOS5. You can initialize the sound with an "invisible" button that disappears after one press at the initialization of your app. Once triggered, you should be able to call snd.play()programatically. It's kind of a cheat, but hopefully it helps!

声音需要用户在 iOS5 中输入。您可以使用“不可见”按钮来初始化声音,该按钮在您的应用程序初始化时按一下就会消失。一旦触发,您应该能够以snd.play()编程方式调用。这有点像作弊,但希望它有所帮助!

Javascript:

Javascript:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {

    document.write('<a id="init" ontouchstart="javascript:sndInit();"></a>');

    function sndInit(){
    snd.play();
    snd.pause();
    document.getElementById('init').style.display = 'none';
    }
}

CSS:

CSS:

<style>
    #init {
        position: absolute;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        z-index: 1000;
    }
</style>

Also, Remy Sharp has some tips on working with audio sprites HERE.

此外,Remy Sharp 在此处提供了一些有关使用音频精灵的技巧。