Question

我无法理解为何我的Firepad设置无法正常工作。即浏览器数据未同步。这是下面的代码：

index.html

<!DOCTYPE html>
<html>
    <head>
  <style>
    html { height: 100%; }
    body { margin: 0; height: 100%; position: relative; }
    /* Height / width / positioning can be customized for your use case.
       For demo purposes, we make firepad fill the entire browser. */
    #firepad {
      width: 100%;
      height: 100%;
    }
  </style>
        <title>CodeMirror</title>





    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>

  <!-- CodeMirror -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css"/>

  <!-- Firepad -->
  <link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.5.0/firepad.css" />
  <script src="https://cdn.firebase.com/libs/firepad/1.5.0/firepad.min.js"></script>
</head>



<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    namespace = '/test';

    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
    socket.on('my response', function(msg) {
        $('#log').append('<p>Received: ' + msg.data + '</p>');
    });
    $('#button1').click(function(event) {
        socket.emit('value_changed', {data: $('#song').val()});
        e.preventDefault();
        var value = $("#song").val();

        $.ajax({
            type: "POST",
            url: "/parse_data",
            data: JSON.stringify({ value } ),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                alert(JSON.stringify(data));
            }
        });
        return false;
    });

});
</script>   





    <h3 style="color: #f51796;">Your first sound</h3>
Type in (the stuff after the hashtag is a comment, it doesnt get used by the program):
<p>
play 60 #this is case sensitive
</p>
You should hear a simple bell-like ping sound! Remember to plug your headphones or a speaker into the RPi!

Try changing 60 to other numbers. What happens if you choose a number too low or high? You might be interested to know that these numbers are MIDI numbers. See the following link for how MIDI relates to a piano and more standard note names: http://www.phys.unsw.edu.au/jw/notes.html

<h3>Your first piece (copy and paste it into the text field and hit submit)</h3>
The next command to learn is sleep which also takes a number as a parameter. In this case the number doesn't represent pitch, it represents time:
<br>
<p>sleep 1</p>
<br>
This will force the program to pause for one second. You can use sleep to add delays in your composition allowing you to create a melody. Try writing a bunch of play and sleep commands such as:
<br>
This also introduces a loop
<br>
<textarea>
5.times do
  play 60
  sleep 0.25
  play 62
  sleep 0.5
  play 66
  sleep 0.5
end
</textarea>

<p>copy and paste whats above in to the text box below and hit submit</p>
<p>Go ahead and start writing your own pieces!</p>

<br>
<body onload="init()">
  <div id="firepad">

  </div>    
    <script>
    function init() {
      //// Initialize Firebase.
      //// TODO: replace with your Firebase project configuration.
    // Initialize Firebase
      var config = {
        apiKey: "<myvalue>",
        authDomain: "<myvalue>",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "..."
      };


      firebase.initializeApp(config);
      //// Get Firebase Database reference.
      var firepadRef = getExampleRef();
      //// Create CodeMirror (with line numbers and the JavaScript mode).
      var codeMirror = CodeMirror(document.getElementById('firepad'), {
        lineNumbers: true,
        mode: 'javascript'
      });
      //// Create Firepad.
      var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
        defaultText: '// JavaScript Editing with Firepad!\nfunction go() {\n  var message = "Hello, world.";\n  console.log(message);\n}'
      });
    }
    // Helper to get hash from end of URL or generate a random one.
    function getExampleRef() {
      var ref = firebase.database().ref();
      var hash = window.location.hash.replace(/#/g, '');
      if (hash) {
        ref = ref.child(hash);
      } else {
        ref = ref.push(); // generate unique location.
        window.location = window.location + '#' + ref.key; // add it as a hash to the URL.
      }
      if (typeof console !== 'undefined') {
        console.log('Firebase data: ', ref.toString());
      }
      return ref;
    }
  </script>

</body>

        <button id ="button1" name="button">submit</button>

<audio controls autoplay>
<source src="http://musictest.ddns.net:8000/out.mp3" type="audio/mp3"/>
</audio>

        <p> give it a minute for the audio to catch up</p>

</div>







<h4>useful links</h4>
<a href="https://www.cl.cam.ac.uk/projects/raspberrypi/sonicpi/media/sonic-pi-cheatsheet.pdf">sonic-pi cheatsheet</a>
<br>
<a href="https://github.com/DavidsFiddle/Sonic-Pi-Code-Bits">sample music to use</a>
<br>
<a href="https://getsongbpm.com/tools/audio"> get the BPM of a song/sample</a>
<br>
<br>
<br>

<h2> upload a sample</h2>
<form action = "/uploader" method = "POST" 
         enctype = "multipart/form-data">
         <input type = "file" name = "file" />
         <input type = "submit"/>
      </form>

</body>
</html>

我可以用输入的值检查正在更新的实时数据库。但是，它们不会发送到指向同一页面的另一个客户端浏览器。我不明白为什么它不同步？

Firepad实时数据库和Codemirror

0 个答案: