JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<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>

JavaScript

var music;
     function init() {
      document.getElementById('files')
      .addEventListener('change',myfile,false);
     };
    function myfile(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      var files=evt.target.files[0];
        
        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;
               var audio = new Audio(music);              
               audio.play();
      };
      reader.readAsDataURL(files);
    };
window.addEventListener('load',init,false);