Question

我有一个简单的网站，通过jquery全身刷新每30秒刷新一次。

现在一旦页面刷新，我想要播放一个简短的声音，我尝试用各种方法做到这一点。

这些方法适用于我的电脑（IE，Chrome和firefox），但目标是三星智能电视。

这是我添加声音的网站刷新：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    function update_site() {
    $.ajax({
        url: "test.html",
        dataType: "html",
        cache: false,
        success: function(data) {
            // Replace body with loaded site. You can do more checks here to check
            // if the fetched content is all there.
            var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
                    .replace(/<\/body[\S\s]*$/i, "");
            $('body').html(body_html);
            $('.last_connect').css('background-color', 'blue');
            $("#goldengun").get(0).play();
        }, 
        error: function(data) {
            $('.last_connect').css('background-color', 'red');
        }
    });
}

// Run every 20 secs.
window.setInterval(function() {
  update_site();
}, 20000);
</script>

<style>

.last_connect {
    background-color: green;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 4%;
    width: 2%
}
</style>
</head>

<body>
<div class="last_connect">
</div>

<audio id='goldengun'>
  <source src="test.mp3" type="audio/mpeg">
</audio>

<button type="button" onclick="update_site();">update site!</button>

</body>
</html>

像我说的那样在我的浏览器中工作但在智能电视上没有，窗口成功刷新但声音没有播放。但是，如果我创建一个只播放音频并在我的setinterval上调用它的单个函数就可以了。如果从我的update_site（）函数调用该函数它不起作用。在我看来这是一种同步问题，浏览器还没有加载所有内容，它已经要求播放声音。

有没有人知道如何解决这个问题？

帮助将不胜感激。

Answer 1

使用Buzz（http://buzz.jaysalvat.com/）。我喜欢它。它使用html5音频，只要浏览器支持js而不创建音频元素，就可以播放ogg，mp3和wav。

示例：

function playSound(){
    var mySound = new buzz.sound( "/sounds/sound", {
        formats: [ "ogg", "mp3", "aac" ]
    });
    mySound.play();
}

甚至更简单：

var sound = new buzz.sound('assets/audio/sound.mp3');

然后调用该函数，调用sound.play();

除非你甚至可以动态创建声音文件，否则你应该知道名字。所以用jQuery的.load()加载正文如下：

$('body').load('newPage.html body');

现在您可以知道加载完成的时间，而不是无法监听的刷新。

所以：

var sound = new buzz.sound("/sounds/sound.mp3");
$('body').load('newPage.html body', function(){
    sound.play();
});

所以它的作用是定义声音，然后将newPage.html的主体加载到当前页面的主体中，一旦完成，它就会播放声音。

我建议将新声音与新页面的名称相关联或存储在变量中。

假设我需要加载新页面并在点击元素时播放声音'abc.mp3'，我可以这样做：

var sound = new buzz.sound('/sounds/sound.mp3');
$('.element').click(function(){
    var pageToLoad = 'abc';
    $('body').load(pageToLoad+'.html body', function(){
        sound = new buzz.sound('sounds/'+pageToLoad+'.mp3');
        sound.play();
    });
});

这是什么定义了声音。然后在一个事件上，在这种情况下点击任何带有class =“element”的东西，它会加载页面体abc.html，然后在加载完成后播放abc.mp3。

Answer 2

无法测试，但也许这样的事情可行吗？

test.html页面中的以下脚本：

<script type="text/javascript">
    var aud = $('<audio>').attr('id', 'goldengun');
    var src = $('<source>').attr('src', 'test.mp3').attr('type', 'audio/mpeg');
    aud.append(src);
</script>

来电者页面中的以下功能：

function update_site() {
    $.ajax({
        url: "test.html",
        dataType: "html",
        cache: false,
        success: function(data) {
            // Replace body with loaded site. You can do more checks here to check
            // if the fetched content is all there.
            var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
                    .replace(/<\/body[\S\s]*$/i, "");

            $('body').html(body_html);
            $('.last_connect').css('background-color', 'blue');

            $('body').append(aud);  
            aud.get(0).play();

        }, 
        error: function(data) {
            $('.last_connect').css('background-color', 'red');
        }
    });
}

window.setInterval(function() {
      update_site();
    }, 1000);

或者只是尝试：

function update_site() {
    $.ajax({
        url: "test.html",
        dataType: "html",
        cache: false,
        success: function(data) {
            // Replace body with loaded site. You can do more checks here to check
            // if the fetched content is all there.
            var body_html = data.replace(/^[\S\s]*<body[^>]*?>/i, "")
                    .replace(/<\/body[\S\s]*$/i, "");

            $('body').html(body_html);
            $('#goldengun', body_html).get(0).play();
            $('.last_connect').css('background-color', 'blue');

        }, 
        error: function(data) {
            $('.last_connect').css('background-color', 'red');
        }
    });
}

Android下的浏览器本身很可能不允许在定时循环中调用.play（）。

jquery在更换身体时播放声音

2 个答案: