js自动生成Audio音频对象并给其附加id和自动播放属性

1、普通html5 audio音频标签是这样的

<audio src="music.mp3" loop autoplay></audio>

其中loop是循环播放

autoplay自动播放，不过所有浏览器是禁止不手动点击就自动播放的。

2、下面介绍通过js生成audio的音频，我直接封装成了

/*

*@desc 加载音频文件

*@param url:音频地址

*@param aid:音频的id 可选

@param aloop:是否循环播放 可选 true|false 

*/

function creat_music(url,aid,aloop){

var myAudio = new Audio();

myAudio.src = url;

if(typeof(aid) !== 'undefined'){

myAudio.id = aid;

    }

    if(typeof(aloop) !== 'undefined'){

myAudio.loop = aloop;

    }

    myAudio.load();//预加载文件

    //myAudio.play();//播放音频文件 只有通过点击事件触发才会生效

    //myAudio.pause();//暂停播放

    document.getElementById("music").appendChild(myAudio);

}

原代码复制

/*
*@desc 加载音频文件
*@param url:音频地址
*@param aid:音频的id 可选
@param aloop:是否循环播放 可选 true|false 
*/
function creat_music(url,aid,aloop){
	var myAudio = new Audio();
	myAudio.src = url;
	if(typeof(aid) !== 'undefined'){
		myAudio.id = aid;
    }
    if(typeof(aloop) !== 'undefined'){
		myAudio.loop = aloop;
    }
    myAudio.load();//预加载文件
    //myAudio.play();//播放音频文件 只有通过点击事件触发才会生效
    //myAudio.pause();//暂停播放
    document.getElementById("music").appendChild(myAudio);
}

你需要在 html中写一个div容器或者你直接appendChild到body里也行
<div id="music"></div>

调用方法

creat_music('mp3/beijing.mp3','music_beijing',true);

创建好了音频文件之后通过点击事件触发即可
比如用jQuery的点击事件
jQuery(".abutton").unbind().click(function(){
   var music_beijing = document.getElementById("music_beijing");
   music_beijing.play();
});