h5页面添加背景音乐

Posted 2023-04-23

参考技术A 个人工作笔记

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

在html页面中添加背景音乐[重复]

【中文标题】在html页面中添加背景音乐[重复]

【英文标题】：Add Background music in html page [duplicate]

【发布时间】：2015-05-20 04:58:20

【问题描述】：

你好朋友我需要在 html 页面中添加背景音乐。我试过了 这段代码。它在 chrome 中工作，但在 Firefox 中没有。有没有办法同时使用这两种浏览器。

embed src="Music/music.mp3" autostart="true" loop="infinite"   

【问题讨论】：

试过了吗？你试过什么？

检查thesitewizard.com/webdesign/backgroundmusic.shtml

检查w3schools.com/html/html5_audio.asp

我也试过了。 在 Firefox 中不工作。

【参考方案1】：

对于所有版本的 Netscape，以及 Internet Explorer (“IE”) 3.0 及更高版本，您可以使用以下代码：

<embed src="Music/music.mp3" autostart="true" loop="true"
 >
</embed>

对于 Opera 和所有 IE 版本，以下代码有效：

<bgsound src="Music/music.mp3" loop="infinite">