h5页面添加背景音乐

个人工作笔记

1.创建Audio元素的方法:
(1)document.createElement() 方法

(2)new Audio()

h5页面添加背景音乐_第1张图片

2.音乐播放

h5页面添加背景音乐_第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);

你可能感兴趣的:(h5页面添加背景音乐)