利用JavaScript在指定的时间播放一段音乐

2011-05-19

由于家园网的微博大赛决赛是要求进入决赛的同学到舞台上用三分钟向大家介绍自己的微博,这样就涉及到选手对时间的把握,我们初定的方案是用一个计时器来计时,并将时间显示给演讲的同学看到,当只剩下30秒钟的时候,播放一段提示音,时间截止的时候在播放另一段提示音。一开始在网上下载了一个计时器,不过不符合要求。所以就自己操刀来写了,用JavaScript写了个计时器。

关于计时的话就是用setTimeout函数来处理就行了,很简单,这个问题的难点是如何让浏览器在指定的时间播放一段提示音。在Google上找了很多资料,不大可用,不过最后还是找到一个好方法了,就是当要播放音乐的时候就使用DOM插入一个播放音乐的embed节点。具体代码如下:

function playSound(url) {
    try {
        musicPlayer.removeChild(musicPlayer.firstChild);
    }
    catch (err) {
        //还未添加过
    }
    var music = document.createElement("embed");
    music.setAttribute("src", url);
    music.setAttribute("hidden", "true");
    music.setAttribute("id", "player");
    //document.body.appendChild(music);
    document.getElementById("musicPlayer").appendChild(music);
}

然后计时的函数里面调用这个函数就可以了。网页中还需要有一个id为musicPlayer的节点。

不过这个实现在Google浏览器下会有bug,播放音乐后网页中的文字大小会变小一倍左右,但占的位置还是那么大,所以计时显示就会不正常,有谁知道这个是什么原因的话,跟我说下哈,谢谢了……