本文介绍了解码&使用html5文件api播放歌曲的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在试图学习文件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纯黑色;}
< / style>
< / head>
< body>
< form>
< input type ='file'id ='files'>
< label for ='files'id ='lab'style ='text-decoration：underline; color：red;'>点击< / label>
< / form>
< p> fileName：< span id ='name'>< / span>< / p>
< script>
var music;
函数init（）{
document.getElementById（'files'）。addEventListener（'change'，myfile，false）;
}
函数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 =音乐;
audio.play（）;
}
reader.readAsArrayBuffer（files）;
$ b window.addEventListener（'load'，init，false）;
< / script>
< / body>
< / html>
解决方案
试试
var music;
函数init（）{
document.getElementById（'files'）
.addEventListener（'change'，myfile，false）;
};
函数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 /）测试（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.play（）;
};
//将`readAsDataURL`替换为`readAsArrayBuffer`
reader.readAsDataURL（files）;
};
window.addEventListener（'load'，init，false）;
jsfiddle
参见
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>
解决方案
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
这篇关于解码&使用html5文件api播放歌曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！