使用Javascript播放声音通知?


86

我该怎么做,所以只要用户单击链接,我们就会播放声音?在这里使用javascript和jquery。


2
我已经为音频控制soundplay.nikolavukovic.net63.net编写了一个jQ插件,它支持您的要求,并且文档与JavaScript代码捆绑在一起,请检查一下。
2013年

您可以(例如)填入的播放列表和一群页面的声音效果和.load().play()他们在使用API的关键时刻。
公开覆盖

1
为了爱所有的圣洁,包括一个静音选项。声音链接是确保用户永远不会回到您的网站的最快方法之一。
2015年

Answers:



25

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

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

看看这个例子:http : //www.storiesinflight.com/html5/audio.html

本网站揭示的其他一些很酷的事情可以做,比如load()pause()和音频元素的一些其他属性。

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

或者

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

SoundManager 2提供了易于使用的API,该API允许在任何现代浏览器(包括IE 6+)中播放声音。如果浏览器不支持HTML5,则它将从Flash获得帮助。如果您要严格使用HTML5且不使用Flash,则可以进行设置,宁愿Flash = 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/


21

发现了这样的东西:

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

5
这太慢了。使用Windows浏览器需要将近一秒钟的时间
thenengah 2010年

@Codeglot取决于应用程序。1秒就可以满足我的要求。
Muhd

1
另外,您可能可以以某种方式预加载它以摆脱延迟。
Muhd

9
延迟来自DOM解析,然后加载文件并启动。如果预加载,则可以在需要时启动它
Xeoncross 2012年

鼠标按下事件后1秒钟很长一段时间。太长。
TARKUS

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

代码从这里开始

在我的实现中,我将音频直接嵌入到HTML中,而无需添加jquery。


2
仅供参考,我正在从ajax函数(在页面加载时运行)的成功处理程序上播放声音,并得到以下错误: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first,Chrome Version 70.0.3538.102 (Official Build) (64-bit)...似乎是解决方案:stackoverflow.com/a/52821721
user1063287



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

};


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>

0

首先,我不喜欢作为用户。

最好的方法可能是使用一个小的Flash小程序在后台播放您的声音。

还在这里回答:跨平台,跨浏览器的方式来播放Java脚本中的声音吗?


3
如果用户知道会播放声音,那有什么不好呢?
lc。

3
当新订单到达时,如果用户需要蜂鸣警报,该怎么办?也许用户不是一直都在看屏幕,也许我需要一个小便并打开BEEP,然后其他人才能回答该命令..只是几个例子..
deepcell
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.