Fatal编程技术网
  • javascript/
  • Javascript jquery在车身更换时播放声音

Javascript jquery在车身更换时播放声音

javascript android jquery ajax audio

Javascript jquery在车身更换时播放声音,javascript,android,jquery,ajax,audio,Javascript,Android,Jquery,Ajax,Audio,我有一个简单的站点，它通过jquery全身刷新每30秒刷新一次 现在，一旦页面刷新发生，我想播放一个简短的声音，我尝试用各种方法来做到这一点 这些方法在我的个人电脑（即chrome和firefox）上有效，但目标是三星智能电视 这是我的站点刷新，添加了声音： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> &l

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

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

这些方法在我的个人电脑（即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>


函数更新_站点（）{
$.ajax({
url:“test.html”，
数据类型：“html”，
cache:false，
成功：功能（数据）{
//用加载的站点替换正文。您可以在此处执行更多检查以检查
//如果提取的内容都在那里。
var body_html=data.replace（/^[\S\S]*]*？>/i，“”）
.replace（/使用Buzz（）。我喜欢它。它使用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（）；

除非并且可能即使您正在动态创建声音文件，您也应该知道这些文件的名称


$（'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。
无法测试，但可能类似的操作会起作用

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>




var aud=$（''）.attr（'id'，'goldengun'）；
var src=$（''）.attr（'src'，'test.mp3'）.attr（'type'，'audio/mpeg'）；
附加澳元（src）；


调用方页面中的以下函数：


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);



功能更新_站点（）{
$.ajax({
url:“test.html”，
数据类型：“html”，
cache:false，
成功：功能（数据）{
//用加载的站点替换正文。您可以在此处执行更多检查以检查
//如果提取的内容都在那里。
var body_html=data.replace（/^[\S\S]*]*？>/i，“”）
.replace（//i，“”）

代替（/问题是声音在每次页面刷新时都会被重新加载，并且可能与以前的不同。@RG337不要使用页面刷新。使用jQuery的.load加载内容，然后在加载成功后，重新定义声音。是否有可能的文件名列表？遗憾的是，由于声音可以生成，第一次加载页面时，列表不完整在刷新页面时进行更改…另外，您的刷新示例可以
t检查页面刷新是否成功。我只希望在页面可以刷新时进行页面刷新您是否使用了.wav文件而不是mp3？您的电视可能不支持它。此外，IOS和Android对音频文件具有安全性，不允许自动播放这些文件方法（如计时器中的.play（））。但是，如果由用户交互（如按下按钮）启动，它将播放。电视可能具有相同的安全性。如果我只在计时器上播放一个节目，它就会播放，而不会刷新。但一旦我将刷新和播放结合起来，它就不起作用了

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');
        }
    });
}