h5页面添加背景音乐

个人工作笔记

1.创建Audio元素的方法：

（1）document.createElement() 方法

（2）new Audio()

2.音乐播放

相关资料：

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

// 使用js生成Audio元素的方法

var audio = document.createElement('audio')//生成一个audio元素

audio.controls = true//这样控件才能显示出来

audio.src = 'dar.mp3'//音乐路径

document.body.appendChild(audio)//把它添加到页面中

var maudio = new Audio()

maudio.controls = true//这样控件才能显示出来

maudio.src = 'dar.mp3'//音乐路径

document.body.appendChild(maudio)//把它添加到页面中

// 背景音乐

var bgAudio = new Audio()

bgAudio.setAttribute("src","dar.mp3")

bgAudio.loop = false

// 音乐开始播放

bgAudio.play()

$(".btn").on("click",function(){

// 音乐停止播放

bgAudio.pause()

// 音乐从头开始播放

bgAudio.currentTime = 0

})

//判断音乐播放结束

audio.addEventListener('ended',function(){

    console.log("33")

},false)

能让按钮发出声音的脚本 这下不用制作flash按钮也可以了 我试用的感觉还不错 制作方法 新建文件 DynamicAudioButton js 代码

//Customize Dynamic Audio Link 自定义动态声音链接function DynamicAudioLink(){open( )}//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色function AudioOver() {document Audio button style background= # document Aulor= white }//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色function AudioDown() {document Aulor= #cccccc }//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色function AudioOut() {document Audio button style background= # document Aulor= #ffffff }//Customize Dynamic Audio sound 自定义动态声音function playHome() {document all sound src = bleep wav }document write( <bgsound id= sound >)//Customize Button Style 自定义按钮样式document write( <style type= text/css >+ <! )document write( select{background:# border color: # color: #ffffff font family:Arial Helvetica Verdanafont size: ptfont weight: bold} + >+ </STYLE>)document write( <center><form name=Audio><input class= select name=button type= button value= Dynamic Audio onclick= DynamicAudioLink() onMouseOver= AudioOver()playHome() onMouseDown= AudioDown() onMouseOut= AudioOut() ></form></center>)

保存文件后 在页面相关处插入代码引用该JS文件

<Script language= JavaScript SRC= DynamicAudioButton js ></script>

lishixinzhi/Article/program/Java/JSP/201311/19721

---