使用Javascript播放声音通知?

时间:2009-01-16 10:41:47

标签: javascript jquery audio

我该怎么做,所以每当用户点击链接时我们都会发出声音?在这里使用javascript和jquery。

10 个答案:

答案 0 :(得分:46)

答案 1 :(得分:25)

在页面上放置<audio>元素 获取音频元素并调用play()方法:

document.getElementById('yourAudioTag').play();

查看此示例:http://www.storiesinflight.com/html5/audio.html

This site揭示了您可以执行的其他一些很酷的事情,例如load()pause()以及音频元素的一些其他属性。

当您想要播放时,此音频元素取决于您。如果您愿意,请阅读按钮的文本并将其与“否”进行比较。

替代地

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2提供了一个易于使用的API,允许在任何现代浏览器中播放声音,包括IE 6+。如果浏览器不支持HTML5,那么它会从flash获得帮助。如果你想要严格的HTML5并且没有flash,那就有一个设置,preferFlash = false

它在iPad,iPhone(iOS4)和其他支持HTML5的设备+浏览器上支持100%无Flash音频

使用就像:

<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';

soundManager.onready(function() {
    soundManager.createSound({
        id: 'mySound',
        url: '/path/to/an.mp3'
    });

    // ...and play it
    soundManager.play('mySound');
});

以下是该动作的演示:http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

答案 2 :(得分:20)

找到类似的东西:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 

答案 3 :(得分:12)

使用html5音频标签和jquery:

// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
    <source src="notify.ogg" type="audio/ogg">
    <source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');

// play sound
$('#chatAudio')[0].play();

代码from here

在我的实现中,我将音频直接嵌入到HTML中而没有附加jquery。

答案 4 :(得分:9)

答案 5 :(得分:7)

$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});

答案 6 :(得分:3)

我用Web Audio API写了一个可以做到的小函数......

var beep = function(duration, type, finishedCallback) {

    if (!(window.audioContext || window.webkitAudioContext)) {
        throw Error("Your browser does not support Audio Context.");
    }

    duration = +duration;

    // Only 0-4 are valid types.
    type = (type % 5) || 0;

    if (typeof finishedCallback != "function") {
        finishedCallback = function() {};   
    }

    var ctx = new (window.audioContext || window.webkitAudioContext);
    var osc = ctx.createOscillator();

    osc.type = type;

    osc.connect(ctx.destination);
    osc.noteOn(0);

    setTimeout(function() {
        osc.noteOff(0);
        finishedCallback();
    }, duration);

};

答案 7 :(得分:2)

新兴的......似乎与IE,Gecko浏览器和iPhone目前兼容......

http://www.jplayer.org/

答案 8 :(得分:1)

以下代码可能会帮助您仅使用javascript在网页中播放声音。您可以在http://sourcecodemania.com/playing-sound-javascript-flash-player/

查看更多详细信息
<script>
function getPlayer(pid) {
    var obj = document.getElementById(pid);
    if (obj.doPlay) return obj;
    for(i=0; i<obj.childNodes.length; i++) {
        var child = obj.childNodes[i];
        if (child.tagName == "EMBED") return child;
    }
}
function doPlay(fname) {
    var player=getPlayer("audio1");
    player.play(fname);
}
function doStop() {
    var player=getPlayer("audio1");
    player.doStop();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="40"
    height="40"
    id="audio1"
    align="middle">
    <embed src="wavplayer.swf?h=20&w=20"
        bgcolor="#ffffff"
        width="40"
        height="40"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
</object>

<input type="button" value="Stop Sound" onClick="doStop()">
</form>

答案 9 :(得分:0)

首先,我不喜欢用户。

最好的方法是使用一个小的flash小程序,在后台播放你的声音。

此处也回答:Cross-platform, cross-browser way to play sound from Javascript?