Question

我想稍后将d3.js动画添加到Android应用中以创建呼吸应用。动画从头开始，但是应该在单击“播放”按钮后开始播放，并且正在播放节拍器的声音（滴答声）。不幸的是，我没有成功。

https://bodymindpower.de/temp/breath/breathe_metronom.html https://bodymindpower.de/temp/breath/breathe.zip

还可以每秒显示一个计数器（文本）。那么，先吸一，二，...然后停一，二，...然后呼一，二，...然后停一，二，...，依此类推？

谢谢，

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    svg {
        background-color: none;
    }
    circle {
        fill: white;
        stroke: #0C3C3F;
    }

      body {
        font-family: monospace;
        line-height: 1.5;

        padding: 0px;
        text-align: center;
      }

      button {
        font-size: 14px;
        background: #130C0E;
        color: #7AC143;
        border: none;
        outline:none;
        padding: 6px 8px;
        letter-spacing: 1px;
      }
      button:hover {
        background: #7AC143;
        color: #130C0E;
      }
</style>

<body>

    <audio id="audio" src="tick_1s.ogg" loop = true ></audio> 
    <script src="d3.v3.min.js"></script>

    <div>
      <button onclick="document.getElementById('audio').play()">Play &#9658;</button>
      <button onclick="document.getElementById('audio').pause()">Pause ||</button>
      <button onclick="document.getElementById('audio').volume+=0.1">&nbsp;+&nbsp; </button>
      <button onclick="document.getElementById('audio').volume-=0.1">&nbsp;‒&nbsp; </button>
    </div>


    <script>

        function playSound() {
          var sound = document.getElementById("audio");
          sound.play();

      }

         function stopSound() {
          var sound = document.getElementById("audio");
          stopSound();
      }

        var margin = {
            top: 40,
            right: 40,
            bottom: 40,
            left: 40
        }, width = 360 - margin.left - margin.right,
            height = 360 - margin.top - margin.bottom;

        var y = d3.scale.ordinal().domain(d3.range(1)).rangePoints([0, height]);
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        svg.selectAll("circle")
            .data(y.domain())
            .enter()
            .append("circle")
            .attr("stroke-width", 0)
            .attr("r", 0)
            .attr("cx", width / 2)
            .attr("cy", y)
            .each(pulse);

        function pulse() {
            var circle = svg.select("circle");          
                circle = circle.transition()
                    .duration(0)
                    .attr("stroke-width", 150)
                    .attr("r", 75);             
            (function repeat() {
                circle = circle.transition()
                    .duration(2000)  // inhale
                    .attr("stroke-width", 0)
                    .attr("r", 150)
                    .style('fill', '#177377')

                    .transition()  // pause after inhale
                    .duration(2000)                 
                    .ease('sine')

                    .transition()  // exhale
                    .style('fill', 'white')
                    .duration(2000)
                    .attr('stroke-width', 150)
                    .attr("r", 75)

                    .transition()  // pause after exhale
                    .duration(2000)                 
                    .ease('sine')                   
                    .each("end", repeat); 
            })();
        }
    </script>

当我按下“播放”按钮（节拍器声音，tick.ogg）时，如何开始播放动画？

0 个答案: