2009 二月 15

02月

15日

控制网页背景音乐方法一二

类归于：做东西 Hbomb 写于 04:00

前一阵子，要给yoho.cn的logo加声音彩蛋，我就重新看了下页面加声音方法，之前也看过比较有趣的一些做法。

再加上文宾提供的yahoo的flash叫声，基本上有两种：

flash声音加载方式

先把声音文件导入flash，编译出连续播放的.swf文件。然后在页面里采用如下js代码：

//flash的HTML代码
var sound_str='<object width="0" height="0" data="xxx.swf" type="application/x-shockwave-flash">
<param name="id" value="wmsgsound" />
<param name="quality" value="high" />
<param name="loop" value="0" /><param name="src" value="xxx.swf" />
<param name="name" value="wmsgsound" /></object>';
 
//声音加载方法
function load_sound()
{
  var sound = document.createElement("span");
  sound.style.visibility = "hidden";
  sound.innerHTML = yodel_str;
  document.body.appendChild(sound);//把flash的HTML代码插入上面的span内
};
//页面触发
document.getELementById("a").onclick=function()
{
load_sound();
}

这种方式，必须使用flash才行，还有注意flash的版本，不然IE的object标签会加载flash失败.

embed声音加载方式

//开始播放
function startWav(uri)
{
  stopWav();
  embedEl = document.createElement(”embed”);
  embedEl.setAttribute(”src”, uri);
  embedEl.setAttribute(”hidden”, true);
  embedEl.setAttribute(”autostart”, true);
  document.body.appendChild(embedEl);
}
//停止播放
function stopWav()
{
  if (embedEl) document.body.removeChild(embedEl);
    embedEl = null;
}
//页面触发
document.getELementById("a").onclick=function()
{
  startWav('a.wav');
}