Javascriptを使用して音声通知を再生しますか?


86

どうすればそれができるので、ユーザーがリンクをクリックするたびにサウンドが再生されますか?ここでjavascriptとjqueryを使用します。


2
私はオーディオコントロールsoundplay.nikolavukovic.net63.net用のjQプラグインを作成しました。それはあなたが求めるものをサポートし、ドキュメントはJavaScriptコードにバンドルされています。チェックしてください。
パブリックオーバーライド

(たとえば)プレイリストに一連のページ効果音を入力し、APIを使用して重要な瞬間.load().play()それらを入力できます。
パブリックオーバーライド

1
聖なるものすべてを愛するために、ミュートオプションを含めます。音声付きのリンクは、ユーザーがサイトに戻らないようにするための最も簡単な方法の1つです。
2015年

回答:


46

このプラグインを使用してください:https//github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');

実際のリンクのURLを取得するようにする方法はありますか?
hakarune 2013年

@hakarune:はい、ソースから「.mp3」で終わるものを削除してください。
カイノアック2014年

これ は、ブラウザが非アクティブであるか、ユーザーによって最小化されている場合に音を鳴らします。希望は誰かを助けます。
shaijut 2016

25

置く<audio>あなたのページ上の要素を。
オーディオ要素を取得し、play()メソッドを呼び出します。

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

この例を確認してください:http//www.storiesinflight.com/html5/audio.html

このサイトでは、あなたのような行うことができ、他のクールなもののいくつかの覆いを取るload()pause()とaudio要素のいくつかの他のプロパティを。

いつ正確にこのオーディオ要素を再生したいかはあなた次第です。ボタンのテキストを読み、必要に応じて「いいえ」と比較します。

あるいは

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

SoundManager 2は、IE6以降を含む最新のブラウザーでサウンドを再生できる使いやすいAPIを提供します。ブラウザがHTML5をサポートしていない場合は、フラッシュの助けを借ります。厳密にHTML5が必要で、フラッシュが必要ない場合は、そのための設定があります。preferFlash= false

iPad、iPhone(iOS4)、その他のHTML5対応デバイスとブラウザで100%フラッシュフリーのオーディオをサポートします

使用は次のように簡単です。

<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ブラウザで遊ぶのに1秒近くかかります
thenengah 2010

アプリケーションに依存する@Codeglot。1秒で私の要件を満たします。
muhd 2011

1
また、遅延を取り除くために、おそらく何らかの方法でプリロードすることができます。
muhd 2011

9
遅延は、DOMの解析、ファイルのロード、および開始に起因します。プリロードすると、必要なときに開始できます
Xeoncross 2012年

マウスダウンイベントの1秒後は長い時間です。長すぎる。
TARKUS 2013

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

ここからのコード。

私の実装では、jqueryを追加せずにオーディオ埋め込みをHTMLに直接追加しました。


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


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

この方法を実行すると、Chromeでスクロールバーが青色になるのはなぜですか?
ブライアンリーシュマン

このリンクを開くと、スクロールバーの問題が解決され、サウンドも再生されますstackoverflow.com/questions/15483455/…–
Azam Alvi

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のみを使用してWebページでサウンドを再生するのに役立つ場合があります。詳細については、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

まず第一に、私はユーザーとしてそれを望んでいません。

最善の方法は、おそらくバックグラウンドでサウンドを再生する小さなフラッシュアプ​​レットを使用することです。

また、ここで答えました:Javascriptからサウンドを再生するためのクロスプラットフォーム、クロスブラウザの方法?


3
音が鳴ることをユーザーが知っているとしたら、何がそんなに悪いのでしょうか。
LC。

3
新しい注文が到着したときに、ユーザーがビープ音のアラートを必要とする場合はどうでしょうか。おそらくユーザーはずっと画面を見ているわけではありません。おそらく私はおしっこが必要でBEEPをオンにすると、他の誰かが注文に答えることができます。ほんの数例..
deepcell 2012
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.