代码之家 › 专栏 › 技术社区 › AL-zami

使用html5文件api解码和播放歌曲

fileapi html javascript

AL-zami · 技术社区 · 10 年前

我第一次尝试学习文件api。这里我想播放一首歌。但没有声音。我尝试使用readAsArrayBuffer()方法,因为我发现它用于解码音频文件。但不幸的是,什么都没有发生。这是如何解决的。谢谢:)

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

1 回复 | 直到 10 年前

guest271314 10 年前

尝试

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

小提琴演奏家 http://jsfiddle.net/guest271314/1314q3q9/

看见

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