javascript – 如何使用Jquery停止所有音频播放

我正在使用 jquery mobile更新页面中的div以播放一些动画.

动画也通过使用document.createElement(‘audio’)播放声音;

我的问题是,当我将页面更新为另一个动画时,旧的声音继续播放.

对不起,这是我的第一个问题,如果我似乎没有正确地说它,我道歉.

这是我的代码..

这是要加载到#animation div中的动画的代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
<body>
    <div id="container"></div>
    <script src="scripts/kinetic-v4.3.2.min.js"></script>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
    /*BABY SCENE*/
    var stage = new Kinetic.Stage({
        container: 'container',width: 578,height: 400
    });
    var babyLayer = new Kinetic.Layer();
    var backLayer = new Kinetic.Layer();


    var imageObj = new Image();
    var backObj = new Image();
    imageObj.onload = function() {
    var baby = new Kinetic.Image({
      x: stage.getWidth() / 2 -100,y: stage.getHeight() / 2 -100,image: imageObj,width: 200,height: 200,opacity: 0.0
    });

    var background = new Kinetic.Image({
      x: 0,y: 0,image: backObj,height: 400,opacity: 0.0
    });

    // add the shape to the layer
    babyLayer.add(baby);
    backLayer.add(background);

    // add the layer to the stage
    stage.add(babyLayer);
    stage.add(backLayer);
    babyLayer.movetoTop();
    babyLayer.draw();

    /*ANIMATION TIMELINE
     * 
     * FirsT EVENT: FADE IN BABY
     * SECOND EVENT: BABY TRANSITION
     * THIRD EVENT: FADE IN BACKGROUND
     */

    /*1) Fade in Baby*/
    setTimeout(function() {
        baby.transitionTo({
        opacity: 1,duration: 1
    });
    },200);

    setTimeout(function() {
    /*JQuery Baby Speech*/
       $(document).ready(function() {
        var babySpeech = document.createElement('audio');
        babySpeech.setAttribute('src','../Animations/sounds/babyspeech.mp3');
        babySpeech.setAttribute('autoplay','autoplay');
        //audioElement.load()
        $.get();
        babySpeech.addEventListener("load",function() {
        babySpeech.play();
        },true);
    });
    },800);

    /*2) Baby Transition*/
    setTimeout(function() {
        baby.transitionTo({
        x: 140,y: stage.getHeight() / 2 + 59,width: 106,height: 118,opacity: 1,duration: 3
    });
    },3000);

    setTimeout(function() {
    /*JQuery Baby Giggle*/
       $(document).ready(function() {
        var baby = document.createElement('audio');
        baby.setAttribute('src','../Animations/sounds/baby.mp3');
        baby.setAttribute('autoplay','autoplay');
        //audioElement.load()
        $.get();
        baby.addEventListener("load",function() {
        baby.play();
        },3000);

    /*3) Fade in Background*/
    setTimeout(function() {
        background.transitionTo({
        opacity: 1,3200);

    setTimeout(function() {
    /*Second JQuery Baby Speech*/
       $(document).ready(function() {
        var babySpeech = document.createElement('audio');
        babySpeech.setAttribute('src',8700);


  };
  imageObj.src = '../Animations/images/baby.png';
  backObj.src = '../Animations/images/background/babyroom.jpg';

</script>

这是主页面代码.当您单击下一个按钮时,它会获取要从数组加载到#animation中的动画页面的文件名.

<div id="nav" data-role="content" style="width: 600px; margin: 0 auto; text-align: center; position: relative; top:450px">
    <a href="#animation" data-role="button" data-inline="true" id ="back">Back</a>
    <a href="#animation" data-role="button" data-inline="true" data-theme="b" id="next">Next</a>
    <script>
        var count=0;
        var link_array = ['baby','bed','book','cat','chair','daddy','dog','mummy','shoe','teddy'];
        $("#next").click(function(e) {
            if(count!==9)
            { 
                $('audio').stop();
                count+=1;
            }
            $('#animation1wl').load('../Animations/' + link_array[count] + '.html');
            $('#animation1wl').trigger('create');
        }); 
        $("#back").click(function(e) {
            if(count !==0)
            {
                count-=1;
            }
            $('#animation1wl').load('../Animations/' + link_array[count] + '.html');
            $('#animation1wl').trigger('create');
        }); 
    </script>
</div>

<div id="animation" data-role="content" style="width: 600px; margin: 0 auto; text-align: left">Problem Loading Resource LNW</div>

当我单击前进或后退按钮时,我希望加载到#animation的上一个动画中的音频停止播放..

这是在#animation中呈现的代码

<div id="animation1wl" data-role="content" style="width: 600px; margin: 0 auto; text-align: left" class="ui-content" role="main">


    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>


    <div id="container"><div style="position: relative; display: inline-block; width: 578px; height: 400px;" class="kineticjs-content"><canvas width="578" style="width: 578px; height: 400px; position: absolute;" height="400"></canvas><canvas width="578" style="width: 578px; height: 400px; position: absolute;" height="400"></canvas></div></div>
    <script src="scripts/kinetic-v4.3.2.min.js"></script>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
      /*BABY SCENE*/
      var stage = new Kinetic.Stage({
        container: 'container',height: 400
      });
      var babyLayer = new Kinetic.Layer();
      var backLayer = new Kinetic.Layer();


      var imageObj = new Image();
      var backObj = new Image();
      imageObj.onload = function() {
        var baby = new Kinetic.Image({
          x: stage.getWidth() / 2 -100,opacity: 0.0
        });

        var background = new Kinetic.Image({
          x: 0,opacity: 0.0
        });

        // add the shape to the layer
        babyLayer.add(baby);
        backLayer.add(background);

        // add the layer to the stage
        stage.add(babyLayer);
        stage.add(backLayer);
        babyLayer.movetoTop();
        babyLayer.draw();

        /*ANIMATION TIMELINE
         * 
         * FirsT EVENT: FADE IN BABY
         * SECOND EVENT: BABY TRANSITION
         * THIRD EVENT: FADE IN BACKGROUND
         */

        /*1) Fade in Baby*/
        setTimeout(function() {
            baby.transitionTo({
            opacity: 1,duration: 1
        });
        },200);

        setTimeout(function() {
        /*JQuery Baby Speech*/
           $(document).ready(function() {
            var babySpeech = document.createElement('audio');
            babySpeech.setAttribute('src','../Animations/sounds/babyspeech.mp3');
            babySpeech.setAttribute('autoplay','autoplay');
            //audioElement.load()
            $.get();
            babySpeech.addEventListener("load",function() {
            babySpeech.play();
            },true);
        });
        },800);

        /*2) Baby Transition*/
        setTimeout(function() {
            baby.transitionTo({
            x: 140,duration: 3
        });
        },3000);

        setTimeout(function() {
        /*JQuery Baby Giggle*/
           $(document).ready(function() {
            var baby = document.createElement('audio');
            baby.setAttribute('src','../Animations/sounds/baby.mp3');
            baby.setAttribute('autoplay','autoplay');
            //audioElement.load()
            $.get();
            baby.addEventListener("load",function() {
            baby.play();
            },3000);

        /*3) Fade in Background*/
        setTimeout(function() {
            background.transitionTo({
            opacity: 1,3200);

        setTimeout(function() {
        /*Second JQuery Baby Speech*/
           $(document).ready(function() {
            var babySpeech = document.createElement('audio');
            babySpeech.setAttribute('src',8700);

        console.log($('animation1wl').find('audio')[0]);

      };
      imageObj.src = '../Animations/images/baby.png';
      backObj.src = '../Animations/images/background/babyroom.jpg';

    </script>

</div>

任何帮助都会很棒..

非常感谢.

解决方法

你可以这样做：

$('audio').each(function(){
    this.pause(); // Stop playing
    this.currentTime = 0; // Reset time
});

javascript – 如何使用Jquery停止所有音频播放

解决方法

相关文章