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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,882评论 2 17
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,503评论 1 5
  • 接上 关于HTML/HTML5(一)http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 840评论 0 4
  • H5 meta详解 viewport width:控制 viewport 的大小,可以指定的一个值,如果 600,...
    FConfidence阅读 844评论 0 3
  • 有一张神奇的纸, 这个纸上有一个黑洞,把纸贴在物品上,你就可以透过物品取得里面的东西。给你一张这样的纸,你会想利用...
    Seyla阅读 1,664评论 1 2