เล่นเสียงแจ้งเตือนโดยใช้ Javascript หรือไม่?


86

ฉันจะทำเช่นนั้นได้อย่างไรดังนั้นเมื่อใดก็ตามที่ผู้ใช้คลิกลิงก์เราจะส่งเสียง ใช้ javascript และ jquery ที่นี่


2
ฉันได้เขียนปลั๊กอินjQสำหรับการควบคุมเสียงsoundplay.nikolavukovic.net63.netมันรองรับสิ่งที่คุณถามและอื่น ๆ อีกมากมายเอกสารมาพร้อมกับโค้ด JavaScript ลองดูสิ
ลบล้างสาธารณะ

คุณสามารถ (ตัวอย่าง) เพลย์ลิสเติม (s) กับพวงของผลกระทบเสียงและหน้า.load(), .play()พวกเขาในช่วงเวลาที่สำคัญโดยใช้ API
ลบล้างสาธารณะ

1
สำหรับความรักของทุกสิ่งศักดิ์สิทธิ์ให้ใส่ตัวเลือกปิดเสียง ลิงก์ที่มีเสียงเป็นวิธีที่รวดเร็วที่สุดวิธีหนึ่งเพื่อให้แน่ใจว่าผู้ใช้จะไม่กลับมาที่ไซต์ของคุณ
Wobbles

คำตอบ:


46

ใช้ปลั๊กอินนี้: https://github.com/admsev/jquery-play-sound

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

มีวิธีทำให้มันดึง url ของลิงค์จริงไหม
hakarune

@hakarune: ใช่เพียงแค่ลบ" .mp3" สิ้นสุดจากแหล่งที่มา
Kai Noack

สิ่งนี้จะ เล่นเสียงหากเบราว์เซอร์ไม่ได้ใช้งานหรือย่อขนาดโดยผู้ใช้ ความหวังช่วยใครบางคน
Shaiju T

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 ที่ใช้งานง่ายซึ่งช่วยให้เล่นเสียงได้ในเบราว์เซอร์สมัยใหม่รวมถึง IE 6+ หากเบราว์เซอร์ไม่รองรับ HTML5 แสดงว่าได้รับความช่วยเหลือจากแฟลช หากคุณต้องการ HTML5 ที่เข้มงวดและไม่ใช้แฟลชก็มีการตั้งค่าสำหรับสิ่งนั้นเช่น Flash = false

รองรับเสียงที่ไม่มีแฟลช 100% บน iPad, iPhone (iOS4) และอุปกรณ์ + เบราว์เซอร์ที่เปิดใช้ HTML5 อื่น ๆ

การใช้งานทำได้ง่ายเพียง:

<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

@Codeglot ขึ้นอยู่กับการใช้งาน 1 วินาทีจะเป็นไปตามข้อกำหนดของฉัน
Muhd

1
นอกจากนี้คุณอาจโหลดไว้ล่วงหน้าเพื่อกำจัดความล่าช้า
Muhd

9
ความล่าช้ามาจากการแยกวิเคราะห์ DOM จากนั้นโหลดไฟล์และเริ่มต้น หากคุณโหลดมันแล้วคุณก็สามารถเริ่มต้นได้เมื่อมีความจำเป็น
Xeoncross

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 firstChrome 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
Brian Leishman

เปิดลิงค์นี้มันจะแก้ปัญหาทั้งแถบเลื่อนและเล่น sound 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

รหัสต่อไปนี้อาจช่วยให้คุณเล่นเสียงในหน้าเว็บโดยใช้จาวาสคริปต์เท่านั้น สามารถดูรายละเอียดเพิ่มเติมได้ที่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
จะมีประโยชน์ถ้าผู้ใช้ต้องการเสียงเตือนเมื่อมีคำสั่งซื้อใหม่ บางทีผู้ใช้ไม่ได้จ้องหน้าจอตลอดเวลาบางทีฉันอาจจะต้องฉี่แล้วเปิดเสียงบี๊บแล้วมีคนอื่นตอบได้ .. แค่ไม่กี่ตัวอย่าง ..
deepcell
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.