阅读量:0
``
html，，，，，HTML5音效示例，，，，， 您的浏览器不支持HTML5音频。，，，，``为HTML5网页添加音效，可以通过多种方式实现，以下是一些详细的示例和方法：
基本方法
1、使用HTML5的audio标签：
简单示例：
```html
<audio controls>
<source src="youraudiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```
在这个示例中，src属性指定音频文件的路径，controls属性使浏览器显示音频控件。
2、JavaScript控制音频播放：
创建声音对象：
```javascript
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function() {
this.sound.play();
}
this.stop = function() {
this.sound.pause();
}
}
```
可以通过创建新的声音对象并调用其play方法来播放音效。
高级方法
1、利用jQuery和自定义组件：
示例代码：
```javascript
if (!FUI) var FUI = {};
FUI.soundComponent = function(profile) {
this.profile = {
src: '',
altSrc: '',
loop: false
};
if (profile) $.extend(this.profile, profile);
this.soundObj = null;
this.isIE = ![1,];
this.init();
};
FUI.soundComponent.prototype = {
init: function() {
this._setSrc();
},
_setSrc: function() {
if (this.soundObj) {
if (this.isIE) {
this.soundObj[0].src = this.profile.src;
} else {
this.soundObj[0].innerHTML = '<source src="' + this.profile.src + '" />';
}
} else {
if (this.isIE) {
this.soundObj = $('<bgsound volume="10000" loop="1" src="' + this.profile.src + '">').appendTo('body');
} else {
this.soundObj = $('<audio preload="auto" autobuffer>' +
'<source src="' + this.profile.src + '" />' +
'<source src="' + this.profile.altSrc + '" />' +
'</audio>').appendTo('body');
}
}
},
setSrc: function(src, altSrc) {
this.profile.src = src;
if (typeof altSrc !== 'undefined') {
this.profile.altSrc = altSrc;
}
this._setSrc();
},
play: function() {
if (this.soundObj) {
if (this.isIE) {
this.soundObj[0].volume = 1; // 把音量打开。
this.soundObj[0].src = this.profile.src;
} else {
this.soundObj[0].play();
}
}
}
};
var sd = new FUI.soundComponent({src: 'ding.wav', altSrc: 'ding.mp3'});
$('.fuibtn').bind('click', function(e) {
sd.play();
});
```
这个示例展示了如何使用jQuery和自定义组件来添加音效，同时兼容主流浏览器（包括IE68）。
2、在HTML游戏中使用音效：
游戏音效示例：
```javascript
var myGamePiece;
var myObstacles = [];
var mySound;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
mySound = new sound("bounce.mp3");
myGameArea.start();
}
function updateGameArea() {
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
mySound.play();
myGameArea.stop();
return;
}
}
}
```
在这个游戏中，当游戏角色与障碍物相撞时，会播放“碰撞”声。
常见问题解答（FAQs）
1、如何确保音频在不同浏览器中都能正常播放？
解答：为了确保音频在不同浏览器中都能正常播放，可以使用多个<source>标签来定义不同格式的音频文件。
```html
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
```
这样，浏览器会尝试加载第一个支持的音频格式。
2、如何在页面加载时自动播放音频？
解答：虽然HTML5的<audio>标签有一个autoplay属性，但出于用户体验考虑，很多浏览器默认禁止了自动播放功能，特别是移动设备，建议不要强制自动播放音频，而是提供用户触发的播放按钮或交互元素，如果确实需要自动播放，可以考虑使用JavaScript在页面加载完成后手动触发播放事件，但这同样可能受到浏览器的限制。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>HTML5 Audio Example</title> <style> /* 简单的样式设置 */ body { fontfamily: Arial, sansserif; textalign: center; padding: 20px; } button { padding: 10px 20px; margin: 10px; cursor: pointer; } </style> </head> <body> <h1>HTML5 Audio Example</h1> <!音频文件标签 > <audio id="audioPlayer" controls> <source src="youraudiofile.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <!播放和暂停按钮 > <button onclick="playAudio()">Play</button> <button onclick="pauseAudio()">Pause</button> <script> // JavaScript 函数用于控制音频播放 function playAudio() { var audio = document.getElementById("audioPlayer"); audio.play(); } function pauseAudio() { var audio = document.getElementById("audioPlayer"); audio.pause(); } </script> </body> </html>说明：
1、 2、 3、JavaScript 函数： 4、样式：这里提供了一些基本的 CSS 样式来改善页面布局和元素外观。 确保替换<audio>：这是用于嵌入音频文件的 HTML5 标签，在这个示例中，你需要将"youraudiofile.mp3" 替换为你的音频文件路径。controls 属性：这个属性为音频元素添加默认控件，如播放、暂停和音量控件。playAudio()：当点击 "Play" 按钮时，这个函数会被调用，它将播放音频。pauseAudio()：当点击 "Pause" 按钮时，这个函数会被调用，它将暂停音频。<source> 标签中的src 属性值为你自己的音频文件路径。
