index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Speech Emotion Classifier | Record </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Emotion Analysis from speech</h1>
    <h1>Record your voice to know whether you're depressed or not ?</h1>
    <div id="controls">
     <button id="recordButton">Record</button>
     <button id="pauseButton" disabled>Pause</button>
     <button id="stopButton" disabled>Stop</button>
    </div>
    <div id="formats"></div>
    <p><strong>Recordings:</strong></p>
    <ol id="recordingsList" class="center"></ol>
    
    <!-- inserting these scripts at the end to be able to use all the elements in the DOM -->

    <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
    <script src="app.js"></script>
  </body>
</html>