Search code examples
javascripthtmlfileapi

decode & play a song using html5 file api


i have been trying to learn the file api for the first time.Here i want to play a song .But no sound is generating .I tried to use readAsArrayBuffer() method as i found it is used to decode audio files.But unfortunately nothing happened.how this can it be solved.thanks :)

<html>

<head>
<style>
   #files{
     display:none;
   }
   #lab{
     display:inline-block;
     width:70px;
     height:30px;
     background:lime;
     padding:5px;
   }
   #lab:hover{
     cursor:pointer;
   }
   p{border:1px solid black;}
</style>
</head>
<body>
  <form>
    <input type='file' id='files'>
    <label for='files' id='lab' style='text-decoration:underline;color:red;'>click</label>
  </form>
  <p>fileName :<span id='name'></span></p>



   <script>
     var music;
     function init(){


      document.getElementById('files').addEventListener('change',myfile,false);

     }
    function myfile(evt){
      var files=evt.target.files[0];

      if(files.type !='audio/mpeg'){
           alert('no audio file');
           return;
      }
      var reader=new FileReader();
      reader.onload=function(e){
               music=e.target.result;

               var audio=new Audio();
               audio.src=music;
               audio.play();


      }
      reader.readAsArrayBuffer(files);

    }


window.addEventListener('load',init,false);
</script>
</body>
</html>

Solution

  • Try

         var music;
         function init() {
          document.getElementById('files')
          .addEventListener('change',myfile,false);
         };
        function myfile(evt) {
          evt.preventDefault();
          evt.stopPropagation();
          var files=evt.target.files[0];
             // test for additional file types
            var types = !((/audio\/mpeg|audio\/mp3|audio\/mp4|audio\/ogg|audio\/x+|wav/).test(files.type));
    
          if(!!types){
               alert('no audio file');
               return;
          };
    
          var reader=new FileReader();
          reader.onload=function(e){
                   music=e.target.result;
                   // see link
                   var audio = new Audio(music);              
                   audio.play();
          };
          // substitute `readAsDataURL` for `readAsArrayBuffer`
          reader.readAsDataURL(files);
        };
    window.addEventListener('load',init,false);
    

    jsfiddle http://jsfiddle.net/guest271314/1314q3q9/

    See

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement#Description