User Interface using PureBasic

Just starting out? Need help? Post your questions and find answers here.
team_joy
New User
New User
Posts: 1
Joined: Thu Apr 12, 2018 6:39 am

User Interface using PureBasic

Post by team_joy »

Hi, I'm making a project which my PureBasic program listens to my recorded file, analyzes the frequency by FFT and save its melody code by text. Also, after saving the text file, I have to compare my recorded text file with other songs whether the melody I've written newly is plagiarized or not.

I've already done the PureBasic programming code, however in my HTML code below I couldn't call the PureBasic program.

How it works is as follows, when I select my recorded mp3 file and press the Play button, it has to go to my PureBasic program and analyze the frequency and save the melody code by itself but I have trouble programming it. Also, when the user presses the Stop button it leads to the next page where the user can compare if their song is plagiarized or not. I'm using APACHE server to open my HTML files and I'm trying to connect APACHE server with PureBasic so I can call PureBasic programmed system when I press the HTML buttons. I've tried using CGI in PureBasic code but I couldn't find the exact answer. Currently I'm having trouble trying to program it. Please help me! Thank you!

Below are my HTML and JS code!


HTML File select, Play/Stop Button code.html

Code: Select all

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="styles/theme.css" type="text/css">
  <link rel="shortcut icon" href="">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="scripts/audio.js" type="text/javascript"></script>
  <title>Project</title>
</head>

<body style="background-image: url('images/wallpaper.jpg');background-size:cover;">
  <nav class="navbar navbar-expand-md bg-primary navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-music"></i><b>   Project</b></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
        aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent"> </div>
    </div>
  </nav>
  <div class="py-5 text-center" style="background-image: url('images/wallpaper.jpg');background-size:cover;">
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-3 mb-4 text-primary">Project</h1>
          <input id="file-input" type="file" accept=".mp3, .wav" class="btn btn-lg mx-1 btn-secondary">
          <!--input type="button" id="play" value="Play" class="btn btn-lg btn-primary mx-1"/-->
          <!--input type="button" id="stop" value="Stop" class="btn btn-lg btn-primary mx-1"/-->
          <button id="playbtn" class="btn btn-lg btn-primary mx-1">Play</button>
          <button id="stopbtn" class="btn btn-lg btn-primary mx-1">
            <a href="compare1.html">Stop</a>
          </button>
          <!--button id="btn" class = "btn btn-lg btn-primary mx-1">Button</button-->
          <!--div id = "file-content"></div-->
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-dark">
    <div claclassss="container">
      <div class="row">
        <div class="col-md-6 p-5"> <i class="fa fa-5x mb-5 fa-music"></i>
       
        </div>
        <div class="p-5 col-md-6">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

audio.js

Code: Select all

var audio, playbtn, stopbtn, fileOpen;

function initAudioPlayer(){
  audio = new Audio();
  audio.src = "myRecording.mp3";
  fileOpen = document.getElementById("files");
  audio.loop = true;
  //audio.play();

  playbtn = document.getElementById("playbtn");
  stopbtn = document.getElementById("stopbtn");

  //fileOpen.addEventListener("click",open);
  playbtn.addEventListener("click",play);
  stopbtn.addEventListener("click",stopAudio);

  function play(){
    audio.play();
  }

  function stopAudio(){
    if(audio.play){
      audio.pause();
      audio.currentTime = 0.0;
    }
  }
}
window.addEventListener("load",initAudioPlayer);


HTML comparing two text file code.html

Code: Select all

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="styles/theme.css" type="text/css">
  <link rel="shortcut icon" href="">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="scripts/compare.js" type="text/javascript"></script>
  <!--script src="scripts/compareexample.js" type="text/javascript"></script-->
  <title>Project</title>
</head>

<body>
  <nav class="navbar navbar-expand-md bg-primary navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-music"></i><b>   Melody Catcher</b></a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false"
        aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse text-center justify-content-end" id="navbar2SupportedContent"> </div>
    </div>
  </nav>
  <div class="text-center" style="background-image: url('images/wallpaper.jpg');background-size:cover;">
    <div class="container py-5">
      <div class="row">
        <div class="col-md-12 h-75">
          <h1 class="display-3 mb-4 text-primary">Project</h1>
          
          <!--input id="myRecording-file" type="file" value="myRecording.txt" class="btn btn-lg mx-1 btn-secondary"-->
          <button id="myRecording-btn" class="btn btn-secondary mx-auto btn-lg btn-block w-25">myRecording.txt</button>
          <input id="orig-file" type="file" accept=".txt" class="btn btn-lg btn-secondary btn-block w-25 mx-auto">
          <button id="comparebtn" class="btn btn-primary btn-lg my-2" onclick="myFunction();" >Compare</button>

          <!--p id="demo" style = "color: red; font-size: 200px; font-weight: bold; font-family: Times New Roman"></p-->
          <p id="demo" style = "color: rgb(43, 147, 253); font-size: 100px; font-weight: bold; font-family: Times New Roman"></p>
          <!--input type="submit" name="submit" id="submitBtn" class="btn btn-lg btn-primary mx-1" disabled="disabled"/-->
        </div>
      </div>
    </div>
  </div>
  <div class="text-white bg-dark">
    <div claclassss="container">
      <div class="row">
        <div class="col-md-6 p-5"> <i class="fa fa-5x mb-5 fa-music"></i>
          
        </div>
      </div>

    </div>
  </div>
</body>

</html>


compare.js

Code: Select all

function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "hidden");
    document.body.appendChild(x);

    document.getElementById("demo").innerHTML = "Similar!";
}

function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "hidden");
    document.body.appendChild(x);

    document.getElementById("demo").innerHTML = "Different! Congratulations!";
}
Martin Verlaan
Enthusiast
Enthusiast
Posts: 124
Joined: Sun Apr 01, 2018 11:26 am

Re: User Interface using PureBasic

Post by Martin Verlaan »

If your Purebasic program is a console application, then I think you can do this with PHP. You can put <?php shell_exec('yourprogram.pb') ?> in your HTML to execute your purebasic program
Post Reply