Memutar pemberitahuan suara menggunakan Javascript?

86

Bagaimana saya bisa melakukannya, jadi setiap kali pengguna mengklik tautan, kami memutar suara? Menggunakan javascript dan jquery disini.

Klik Suka
sumber
2
Saya telah menulis plugin jQ untuk audio control soundplay.nikolavukovic.net63.net , mendukung apa yang Anda minta dan lebih banyak lagi, dokumen dibundel dengan kode JavaScript, periksa.
pengesampingan publik
Anda dapat (misalnya) mengisi daftar putar dengan banyak efek suara halaman dan .load(), .play()pada saat-saat penting menggunakan api.
pengesampingan publik
1
Untuk cinta segala sesuatu yang suci, sertakan opsi bisu. Tautan dengan suara adalah salah satu cara tercepat untuk memastikan pengguna tidak pernah kembali ke situs Anda.
Goyangan

Jawaban:

46

Gunakan plugin ini: https://github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');
Alexander Manzyuk
sumber
Apakah ada cara untuk membuatnya menarik url dari tautan yang sebenarnya?
hakarune
@hakarune: Ya, hapus saja akhiran ".mp3" dari sumbernya .
Kai Noack
Ini memainkan suara jika browser tidak aktif atau diminimalkan oleh pengguna. Harapan membantu seseorang.
Shaiju T
25

Letakkan <audio>elemen di halaman Anda.
Dapatkan elemen audio Anda dan panggil play()metode:

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

Lihat contoh ini: http://www.storiesinflight.com/html5/audio.html

Situs ini mengungkapkan beberapa hal menarik lainnya yang dapat Anda lakukan seperti load(), pause(), dan beberapa properti lainnya dari unsur audio.

Kapan tepatnya Anda ingin memainkan elemen audio ini terserah Anda. Bacalah teks tombol dan bandingkan dengan "tidak" jika Anda suka.

kalau tidak

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

SoundManager 2 menyediakan API yang mudah digunakan yang memungkinkan suara diputar di browser modern apa pun, termasuk IE 6+. Jika browser tidak mendukung HTML5, maka itu mendapat bantuan dari flash. Jika Anda menginginkan HTML5 yang ketat dan tidak ada flash, ada pengaturan untuk itu, preferFlash = false

Ini mendukung 100% audio bebas Flash di iPad, iPhone (iOS4) dan perangkat + browser yang mendukung HTML5

Penggunaannya sesederhana:

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

Berikut demo aksinya: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Joris Van Regemortel
sumber
21

Menemukan sesuatu seperti itu:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 
Xn0vv3r
sumber
5
Ini untuk memperlambat. Butuh hampir satu detik untuk bermain dengan browser windows
tengah
@Codeglot yang bergantung pada aplikasi. 1 Detik akan memenuhi kebutuhan saya.
Muhd
1
Juga, Anda mungkin bisa melakukan pramuat entah bagaimana untuk menghilangkan penundaan.
Muhd
9
Penundaan berasal dari penguraian DOM, lalu memuat file, dan memulainya. Jika Anda melakukan pramuat, maka Anda dapat memulainya saat diperlukan .
Xeoncross
1 detik setelah peristiwa mousedown adalah waktu yang lama. Terlalu panjang.
TARKUS
12

Menggunakan tag audio html5 dan 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();

Kode dari sini .

Dalam implementasi saya, saya menambahkan audio embed langsung ke HTML tanpa jquery append.

Kai Noack
sumber
2
Hanya untuk referensi, saya memutar suara pada penangan sukses dari fungsi ajax (yang berjalan pada pemuatan halaman), dan mendapatkan kesalahan ini Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstVersion 70.0.3538.102 (Official Build) (64-bit)
:,
7
$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});
Andrew Philpott
sumber
Mengapa melakukan metode ini membuat bilah gulir berwarna biru di Chrome?
Brian Leishman
Buka tautan ini, ini akan menyelesaikan masalah bilah scrol dan juga memutar suara stackoverflow.com/questions/15483455/…
Azam Alvi
3

Saya menulis fungsi kecil yang dapat melakukannya, dengan API Audio Web ...

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

};
alex
sumber
2

Pemunculan baru ... tampaknya kompatibel dengan IE, browser Gecko, dan iPhone sejauh ini ...

http://www.jplayer.org/

merosot
sumber
1

Kode berikut mungkin membantu Anda memainkan suara di halaman web dengan hanya menggunakan javascript. Anda dapat melihat detail lebih lanjut di 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>
Falak
sumber
0

Hal pertama yang pertama, saya tidak suka itu sebagai pengguna.

Cara terbaik untuk melakukannya mungkin menggunakan applet flash kecil yang memutar suara Anda di latar belakang.

Juga dijawab di sini: Cara lintas platform, lintas browser untuk memutar suara dari Javascript?

Javache
sumber
3
Apa buruknya jika pengguna tahu suara akan dimainkan?
lc.
3
Ini berguna, bagaimana jika pengguna membutuhkan peringatan bip, ketika pesanan baru tiba? mungkin pengguna tidak selalu melihat ke layar, mungkin saya perlu pipis dan mengaktifkan BIP, lalu orang lain dapat menjawab pesanan .. hanya beberapa contoh ..
deepcell