title: How to convert a blob URL to a audio file and save it to the server
body: <p>I have successfully recorded and added the recorded audio and placed it in the audio tag of my HTML page.</p>
  
  <p><code>&lt;audio controls="" src="blob:https://localhost:3000/494f62b9-0513-4d1c-9206-6569083a2661"&gt;&lt;/audio&gt;</code></p>
  
  <p>Also, I have successfully got the blob source url from the source tag using this line.
  <code>var source = document.getElementById("Audio").src;</code> 
  and this is my blob url</p>
  
  <p>blob:<a href="https://localhost:3000/494f62b9-0513-4d1c-9206-6569083a2661" rel="noreferrer">https://localhost:3000/494f62b9-0513-4d1c-9206-6569083a2661</a></p>
  
  <p>Now how to convert the blob source url as an audio file and send it to my server. I have tried a lot, help to do this and I am new to this blob. Since I am using this recorder api to work on all browsers I have only this chance by getting the blob source then converting it into an audio file and sending the audio file to my server using form data.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;FeedBack URL&lt;/title&gt;
    &lt;link rel="shortcut icon" href="./favicon.ico"&gt;
    &lt;meta content="width=device-width" name="viewport"&gt;
    &lt;meta name="theme-color" content="#00e5d2"&gt;
    &lt;style&gt;
      * {
        padding: 0;
        margin: 0
      }
  
      a {
        color: #009387;
        text-decoration: none
      }
  
      a:visited {
        color: #930087
      }
  
      body {
        margin: 1rem;
        font-family: sans-serif
      }
  
      main {
        max-width: 28rem;
        margin: 0 auto;
        position: relative
      }
  
      #controls {
        display: flex;
        margin-top: 2rem
      }
  
      button {
        flex-grow: 1;
        height: 2.5rem;
        min-width: 2rem;
        border: none;
        border-radius: .15rem;
        background: blue;
        margin-left: 2px;
        box-shadow: inset 0 -.15rem 0 rgba(0, 0, 0, .2);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center
      }
  
      button:focus,
      button:hover {
        outline: none;
        background: blue;
      }
  
      button::-moz-focus-inner {
        border: 0
      }
  
      button:active {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, .2);
        line-height: 3rem
      }
  
      button:disabled {
        pointer-events: none;
        background: #d3d3d3
      }
  
      button:first-child {
        margin-left: 0
      }
  
      button svg {
        transform: translateY(-.05rem);
        fill: #000;
        width: 1.4rem
      }
  
      button:active svg {
        transform: translateY(0)
      }
  
      button:disabled svg {
        fill: #9a9a9a
      }
  
      button text {
        fill: #00e5d2
      }
  
      button:focus text,
      button:hover text {
        fill: #00ffe9
      }
  
      button:disabled text {
        fill: #d3d3d3
      }
  
      #formats,
      #mode {
        margin-top: .5rem;
        font-size: 80%
      }
  
      #mode {
        float: right
      }
  
      #support {
        display: none;
        margin-top: 2rem;
        color: red;
        font-weight: 700
      }
  
      #list {
        margin-top: 1.6rem
      }
  
      audio {
        display: block;
        width: 100%;
        margin-top: .2rem
      }
  
      li {
        list-style: none;
        margin-bottom: 1rem
      }
  
      .popup-position {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;
  
        /* // The Modal Wrapper */
      }
  
      #popup-wrapper {
        text-align: left;
      }
  
      /* //The Modal Container */
      #popup-container {
  
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        width: 300px;
        margin: 70px auto;
      }
  
      #closePopup {
        margin-left: 281px;
        margin-top: -18px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;a href="javascript:void(0)" onclick="toggle_visibility('contact-popup');"&gt;Open Popup&lt;/a&gt;
    &lt;div class="popup-position" id="contact-popup"&gt;
      &lt;div class="popup-wrapper"&gt;
        &lt;div id="popup-container"&gt;
          &lt;h5&gt;Feedback&lt;/h5&gt;
          &lt;p id="closePopup"&gt;&lt;a href="javascript:void(0)" style="color: red;" title="Close"
              onclick="toggle_visibility('contact-popup');"&gt;X&lt;/a&gt;&lt;/p&gt;
          &lt;main&gt;
            &lt;div id="controls"&gt;
              &lt;button id="record" disabled="" autocomplete="off" title="Record"&gt;
                &lt;svg viewBox="0 0 100 100" id="recordButton"&gt;
                  &lt;circle cx="50" cy="50" r="46"&gt;&lt;/circle&gt;
                &lt;/svg&gt;
              &lt;/button&gt;
              &lt;button id="pause" disabled="" autocomplete="off" title="Pause"&gt;
                &lt;svg viewBox="0 0 100 100"&gt;
                  &lt;rect x="14" y="10" width="25" height="80"&gt;&lt;/rect&gt;
                  &lt;rect x="62" y="10" width="25" height="80"&gt;&lt;/rect&gt;
                &lt;/svg&gt;
              &lt;/button&gt;&lt;button id="resume" disabled="" autocomplete="off" title="Resume"&gt;
                &lt;svg viewBox="0 0 100 100"&gt;
                  &lt;polygon points="10,10 90,50 10,90"&gt;&lt;/polygon&gt;
                &lt;/svg&gt;
              &lt;/button&gt;&lt;button id="stop" autocomplete="off" disabled="" title="Stop"&gt;
                &lt;svg viewBox="0 0 100 100"&gt;
                  &lt;rect x="12" y="12" width="76" height="76"&gt;&lt;/rect&gt;
                &lt;/svg&gt;
              &lt;/button&gt;
            &lt;/div&gt;
            &lt;div id="mode"&gt;
              Native support,&lt;a href="?polyfill"&gt;force polyfill&lt;/a&gt;
            &lt;/div&gt;
            &lt;div id="formats"&gt;&lt;/div&gt;
            &lt;div id="support"&gt;
              Your browser doesn’t support MediaRecorder
              So please use chrome or edge or mozilla
            &lt;/div&gt;
            &lt;ul id="list"&gt;&lt;/ul&gt;
            &lt;form enctype="multipart/form-data"&gt;&lt;/form&gt;
              &lt;input id="image-file" type="file" hidden /&gt;
              &lt;button type="button" id="formSubmit" onclick="sendto();"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/main&gt;
          &lt;div class="modal-footer"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      (function () {
        var a, i, b, d, f, g, l = ["start", "stop", "pause", "resume"],
          m = ["audio/webm", "audio/ogg", "audio/wav"],
          j = 1024,
          k = 1 &lt;&lt; 20;
  
        function n(e) {
          var r, $ = Math.abs(e);
          return $ &gt;= k ? (r = "MB", e /= k) : $ &gt;= j ? (r = "KB", e /= j) : r = "B", e.toFixed(0).replace(
            /(?:\.0*|(\.[^0]+)0+)$/, "$1") + " " + r;
        }
  
        function e(e) {
          i.innerHTML = "", navigator.mediaDevices.getUserMedia({
            audio: !0
          }).then(function (r) {
            a = new MediaRecorder(r), l.forEach(function (e) {
              a.addEventListener(e, t.bind(null, e));
            }), a.addEventListener("dataavailable", s), "full" === e ? a.start() : a.start(1e3);
          }), b.blur(), setTimeout(myFunction, 16000);
        }
  
        function o() {
          a.stop(), a.stream.getTracks()[0].stop(), g.blur();
        }
  
        function p() {
          a.pause(), d.blur();
        }
  
        function q() {
          a.resume(), f.blur();
        }
  
        function s(e) {
          var r = document.createElement("li"),
            $ = document.createElement("strong");
          $.innerText = "dataavailable: ", r.appendChild($);
          var a = document.createElement("span");
          a.innerText = e.data.type + ", " + n(e.data.size), r.appendChild(a), a.setAttribute("id", "span");
          var o = document.createElement("audio");
          o.controls = !0, o.src = URL.createObjectURL(e.data), o.setAttribute("id", "Audio"), r.appendChild(o), i
            .appendChild(r);
  
        }
  
        function t(e) {
  
          var r = document.createElement("li");
          r.innerHTML = "&lt;strong&gt;" + e + ": &lt;/strong&gt;" + a.state, "start" === e &amp;&amp; (r.innerHTML += ", " + a
              .mimeType), i.appendChild(r), "recording" === a.state ? (b.disabled = !0,
              f.disabled = !0, d.disabled = !1, g.disabled = !1) : "paused" === a.state ? (b
              .disabled = !0, f.disabled = !1, d.disabled = !0, g.disabled = !1) : "inactive" === a
            .state &amp;&amp; (b.disabled = !1, f.disabled = !0, d.disabled = !0, g
              .disabled = !0);
        }
        i = document.getElementById("list"),
          b = document.getElementById("record"),
          f = document.getElementById("resume"),
          d = document.getElementById("pause"),
          g = document.getElementById("stop"),
          MediaRecorder.notSupported ? (i.style.display = "none",
            document.getElementById("controls").style.display = "none",
            document.getElementById("formats").style.display = "none",
            document.getElementById("mode").style.display = "none",
            document.getElementById("support").style.display = "block") : (document.getElementById("formats")
            .innerText = "Format: " + m
            .filter(function (e) {
              return MediaRecorder.isTypeSupported(e);
            }).join(", "), b.addEventListener("click", e.bind(null,
              "full")), f.addEventListener("click", q), d.addEventListener("click", p),
            g.addEventListener("click", o), b.disabled = !1);
      })();
  
      function myFunction() {
        document.getElementById("stop").click();
      }
  
      function toggle_visibility(id) {
        var element = document.getElementById(id);
  
        if (element.style.display == 'block')
          element.style.display = 'none';
        else
          element.style.display = 'block';
      }
  
      async function sendto() {
        var source = document.getElementById("Audio").src;
  
  
  
        $.ajax({
        type: 'POST',
        url: "http://localhost:3000/audioUpload",
        data: data,
        cache: false,
        processData: false,
        contentType: false,
        success: function(result) {
  
        }
      })
  
  
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I have tried the fetch code that is </p>
  
  <pre><code>let file = await fetch(source).then(r =&gt; r.blob()).then(blobFile =&gt; new File([blobFile], fileName, {
          type: res[0]
        })); 
  </code></pre>
  
  <p>But it gives me the raw data I don't know how to send and receive the raw data.</p>