特定のイベントが発生したときに、Web サイトでユーザーに短い通知音を鳴らしたいと考えています。
Web サイトを開いたときに、サウンドが(瞬時に) 自動的に開始されないようにする必要があります。代わりに、JavaScript を介してオンデマンドで再生する必要があります (特定のイベントが発生した場合)。
これが古いブラウザー (IE6 など) でも機能することが重要です。
したがって、基本的に2つの質問があります。
<embed>対<object>対 フラッシュ 対<audio>)function playSound(url) {
const audio = new Audio(url);
audio.play();
}
<button onclick="playSound('https://your-file.mp3');">Play</button>
Edge 12 以降、Firefox 20 以降、Internet Explorer 9 以降、Opera 15 以降、Safari 4 以降、Chrome
MP3を使うだけ
(従来のブラウザーの場合)
function playSound(filename){
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}
<button onclick="playSound('bing');">Play</button>
<div id="sound"></div>
Web サイトで通知音を鳴らすためのもう 1 つのプラグイン: Ion.Sound
利点:
プラグインをセットアップします。
// set up config
ion.sound({
sounds: [
{
name: "my_cool_sound"
},
{
name: "notify_sound",
volume: 0.2
},
{
name: "alert_sound",
volume: 0.3,
preload: false
}
],
volume: 0.5,
path: "sounds/",
preload: true
});
// And play sound!
ion.sound.play("my_cool_sound");
yahooのメディアプレーヤーはどうですかyahooのライブラリを埋め込むだけです
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
そしてそれを次のように使用します
<a id="beep" href="song.mp3">Play Song</a>
自動起動するには
$(function() { $("#beep").click(); });
クロスブラウザ対応の通知を再生する
この投稿の@Tim Tisdall のアドバイスに従って、 Howler.jsプラグインを確認してください。
Chrome などのブラウザーは、パフォーマンス向上javascriptのために最小化または非アクティブ時に実行を無効にします。ただし、ブラウザが非アクティブであるか、ユーザーによって最小化されていても、通知音が鳴ります。
var sound =new Howl({
src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
'../sounds/rings.aiff'],
autoplay: true,
loop: true
});
sound.play();
希望は誰かを助けます。
フラッシュにフォールバックするタグのポリフィルであるaudio.js を使用します。<audio>
一般に、HTML 5 API へのポリフィルについては、 https: //github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills を参照してください (より多くのポリフィルが含まれています<audio>) 。
コードでイベントを呼び出す場合は、トリガーを作成するのが最善の方法です。ユーザーがページにいない場合、ブラウザーは応答しないためです。
<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>
サウンドを再生したいときにボタンをトリガーできるようになりました
$('#playSoundBtn').trigger('click');
var audio = new Audio('audio_file.mp3');
function post()
{
var tval=document.getElementById("mess").value;
var inhtml=document.getElementById("chat_div");
inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
audio.play();
}
このコードは talkerscode からのものです 完全なチュートリアルについてはhttp://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.phpをご覧ください
サウンドを再生するためのクリーンで機能的なメソッドを作成しました。
sounds = {
test : new Audio('/assets/sounds/test.mp3')
};
sound_volume = 0.1;
function playSound(sound) {
sounds[sound].volume = sound_volume;
sounds[sound].play();
}
function stopSound(sound) {
sounds[sound].pause();
}
function setVolume(sound, volume) {
sounds[sound].volume = volume;
sound_volume = volume;
}