用于.ogg循环播放的javascript/jquery启动按钮

javascript/jquery start button for .ogg looped play

本文关键字：jquery 启动 按钮 javascript ogg 循环 播放 用于      更新时间：2023-09-26

下面的代码生成并循环一些.ogg文件的随机迭代次数。页面加载后，它们立即播放。

注释掉的部分是我尝试添加"开始"按钮。我在这里做错了什么，我如何用按钮而不是页面加载来启动它？

（还有：我怀疑像我所做的那样将php和javascript结合起来是一种糟糕的做法。我这样做是因为php中的随机化非常容易，而且我对js/jquery还是个新手。）

（编辑：见下面的编辑。我只是忘记关闭标签。）

<html>
    <head>
        <title>Audio Testing</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <?php  
$randC = rand(2,4); 
$C = $randC * 4;
$G = $C / 2;
    echo "
        <script type='"text/javascript'">
            $(document).ready(function() 
            {
        //    $('"#start'").click(function() 
        //    { 
                var time = 0;
                var riff_time = 2920;
                var base = 'riff';
                for(i = 0; i < $C; i++)
                {
                    var id = base + ((i + 1) ); 
                    window.setTimeout ('"document.getElementById(''" + id + '"').play()'", time);
                    time += riff_time;
                }
                var timeG = 0;
                var riff_time = 2920;
                var baseG = 'riffG';
                for(iG = 0; iG < $G; iG++)
                {
                    var idG = baseG + ((iG + 1) );  
                    window.setTimeout ('"document.getElementById(''" + idG + '"').play()'", timeG);
                    timeG += riff_time;
        //      }               
              }       // EDIT: This should be }); ... that fixes it.    
            }); 
        </script>
        "?>
        <style type="text/css">
        </style>
    </head> 
    <body style="background-color: #999;">
<!--<button id="start">Start</button>
    <br>  -->
    <?php
    echo "C:<br>";
    for ($i=1; $i<= $C; $i++) {
        echo '<audio controls id="riff'.$i.'">
        <source src="loopC.ogg" type="audio/ogg">
        </audio>';
    }
    echo "<br>G:<br>";
    for ($i=1; $i<= $G; $i++) {
        echo '<audio controls id="riffG'.$i.'">
        <source src="loopG.ogg" type="audio/ogg">
        </audio>';
    }
    ?>
    </body>
</html>

您可以为开始按钮指定一个类start以及和data-id。

所以你的html启动按钮会像，

<img src="start-button.jpg" class="start" data-id="riff1"> 
            //So this is start button for audio elementwith id riff1.

这将如何工作？

$('.start').click(function(){
      $("#"+$(this).data('id')).play(); //This should do.
 }

是的，在你的php文件中应该是这样的类型，

<!DOCTYPE html>
<html>
    <head>
        <title>Audio Testing</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <?php  
$randC = rand(2,4); 
$C = $randC * 4;
$G = $C / 2;
        <script type="text/javascript">
            $(document).ready(function() 
            {
        //    $("#start").click(function() 
        //    { 
                var time = 0;
                var riff_time = 2920;
                var base = 'riff';
 <?php      for(i = 0; i < $C; i++)
                {
                 echo "   var id = base + ((i + 1) ); 
                    window.setTimeout ('"document.getElementById(''" + id + '"').play()'", time);
                    time += riff_time; ";
                }
    ?>
                var timeG = 0;
                var riff_time = 2920;
                var baseG = 'riffG';
     <?php           for(iG = 0; iG < $G; iG++)
                {
                 echo "   var idG = baseG + ((iG + 1) );  
                    window.setTimeout ('"document.getElementById(''" + idG + '"').play()'", timeG);
                    timeG += riff_time;   ";
        //      }       ?>        
              } 
            }); 
        </script>
        <style type="text/css">
        </style>
    </head> 
    <body style="background-color: #999;">
<!--<button id="start">Start</button>
    <br>  -->
    <?php
    echo "C:<br>";
    for ($i=1; $i<= $C; $i++) {
        echo '<audio controls id="riff'.$i.'">
        <source src="loopC.ogg" type="audio/ogg">
        </audio>';
    }
    echo "<br>G:<br>";
    for ($i=1; $i<= $G; $i++) {
        echo '<audio controls id="riffG'.$i.'">
        <source src="loopG.ogg" type="audio/ogg">
        </audio>';
    }
    ?>
    </body>
</html>
相关文章：