Search code examples
javascripthtmlaudioblobwebapi

I'm trying to make the users audio downloadable but having issues


I'm trying to make an audio editor but can't seem to get audio value. I've tried document.getElementById("audio).value and document.getElementById("audio").data but both return undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="file" type="file">
    <button id="save" onclick="save()">Save</button>
</body>
<script>
    var audio;
document.getElementById("file").addEventListener("change",function(e){
    var read=new FileReader()
    read.onload=function(){
        var aud=document.createElement("audio")
        aud.id="audio"
        aud.src=read.result
        document.body.appendChild(aud)
        aud.play()
        
    }
   
    
    read.readAsDataURL(document.getElementById("file").files[0])
    
})
function save(){
var aud=document.getElementById("audio").value
console.log(aud)
var a=document.createElement("a")
a.href=aud
a.download="test.mp3"
document.body.appendChild(a)
a.click()
}
    </script>
</html>


Solution

  • The result is undefined because the audio doesn't has a attribute called value instead of value use src

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input id="file" type="file">
        <button id="save" onclick="save(event)">Save</button>
    </body>
    <script>
        var audio;
    document.getElementById("file").addEventListener("change",function(e){
        var read=new FileReader()
        read.onload=function(){
            var aud=document.createElement("audio")
            aud.id="audio"
            aud.src=read.result
            document.body.appendChild(aud)
            aud.play()
            
        }
       
        
        read.readAsDataURL(document.getElementById("file").files[0])
        
    })
    function save(e){
        var aud=document.getElementById("audio").src;
        var a=document.createElement("a")
        a.href=aud
        a.download="test.mp3"
        document.body.appendChild(a)
        a.click()
    }
    </script>
    </html>
     Run code snippet

    If You use it the audio gonna be downloadable!