จะเล่นเสียงแจ้งเตือนบนเว็บไซต์ได้อย่างไร?


108

เมื่อเกิดเหตุการณ์บางอย่างขึ้นฉันต้องการให้เว็บไซต์ของฉันส่งเสียงแจ้งเตือนสั้น ๆ ให้กับผู้ใช้

เสียงไม่ควรเริ่มอัตโนมัติ (ทันที) เมื่อเปิดเว็บไซต์ แต่ควรเล่นตามความต้องการผ่าน JavaScript (เมื่อเหตุการณ์นั้นเกิดขึ้น)

สิ่งสำคัญคือต้องใช้งานได้กับเบราว์เซอร์รุ่นเก่าด้วย (IE6 เป็นต้น)

ดังนั้นโดยทั่วไปมีสองคำถาม:

  1. ฉันควรใช้ตัวแปลงสัญญาณอะไร
  2. แนวทางปฏิบัติที่ดีที่สุดในการฝังไฟล์เสียงคืออะไร ( <embed>เทียบ<object>กับแฟลชเทียบกับ<audio>)

คุณสามารถลองใช้github.com/VJAI/musquito
VJAI

คำตอบ:


98

โซลูชันปี 2020

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

รองรับ Codecs

เพียงใช้ 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>

รองรับเบราว์เซอร์

  • <audio> (เบราว์เซอร์สมัยใหม่)
  • <embed> (ทางเลือก)

รหัสที่ใช้

  • MP3 สำหรับ Chrome, Safari และ Internet Explorer
  • OGG สำหรับ Firefox และ Opera

คำตอบที่ดี ในกรณีนี้แม้ว่าเสียงจะเล่นทันทีเมื่อเปิดหน้า - แต่ฉันถือว่าคุณแสดงวิธีการเพื่อการสาธิตเท่านั้น
Stefan

@ Stefan ถูกต้อง แต่อาจจะสับสน ฉันจะลบมันออกจากคำตอบของฉัน ขอบคุณสำหรับคำแนะนำ
Timo

ขอบคุณมากสำหรับการแก้ปัญหา @valmar
Jagdeep Singh

@DavidLarsson เนื่องจากมีเบราว์เซอร์บางตัวที่ไม่สามารถอ่านตัวแปลงสัญญาณบางตัวได้
Timo

2
ฉันล้มเหลวในการทำให้มันทำงานกับ Internet Explorer เวอร์ชัน 8 ของฉัน
Md. Arafat Al Mahmud

83

ในปี 2559 สิ่งต่อไปนี้จะเพียงพอ (คุณไม่จำเป็นต้องฝัง):

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

ดูเพิ่มเติมได้ที่นี่


และอาจตรวจสอบด้วยว่ามีการกำหนดเสียงก่อนทำหรือไม่
Christophe Roussy

1
นี่เป็นคำตอบที่ยอดเยี่ยมเรียบง่ายและใช้งานได้ดี
Polaris

5
ไม่ทำงานอีกต่อไปฉันเข้าใจแล้วUncaught (in promise) DOMException
jack blank

2
เพิ่งลองใช้ Chrome ล่าสุด (เวอร์ชัน 74.0.3729.169) และใช้ได้กับฉัน
weltschmerz

มันทำงานได้อย่างถูกต้องบน chrome, FF และ opera และเป็นแนวทางที่ดีกว่าคำตอบที่ยอมรับมากเนื่องจากคำตอบนั้นจะต่อท้ายแท็กเสียงเข้ากับแท็กร่างกายของคุณเนื่องจากสคริปต์การแจ้งเตือนส่วนใหญ่มักจะถูกเรียกในช่วงเวลา
Muhammad Omer Aslam

16

อีกหนึ่งปลั๊กอินเพื่อเล่นเสียงแจ้งเตือนบนเว็บไซต์: Ion.Sound

ข้อดี:

  • ปลั๊กอิน JavaScript สำหรับเล่นเสียงตาม Web Audio API พร้อมทางเลือกกลับเป็น HTML5 Audio
  • ปลั๊กอินทำงานบนเดสก์ท็อปและเบราว์เซอร์มือถือยอดนิยมและสามารถใช้ได้ทุกที่ตั้งแต่เว็บไซต์ทั่วไปไปจนถึงเกมเบราว์เซอร์
  • รองรับ Audio-Sprite
  • ไม่มีการพึ่งพา (ไม่จำเป็นต้องใช้ jQuery)
  • รวมเสียงฟรี 25 เสียง

ตั้งค่าปลั๊กอิน:

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

4

วิธีการเกี่ยวกับเครื่องเล่นสื่อของ 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(); });

เป็นทางออกที่ดี แต่จะซ่อนลิงก์นั้นได้หรือไม่? ฉันคิดว่าถ้าคุณตั้งค่าdisplay: noneไว้มันจะไม่เล่นเสียงอีกต่อไป นอกจากนี้ไลบรารีสื่อของ Yahoo ยังแสดงไอคอน "เล่น" เล็ก ๆ ทางด้านซ้ายของลิงก์ ..
Timo

@valmar: visiblity: hidden;คือคำตอบของคุณ
Starx

3

เล่นการแจ้งเตือนที่เข้ากันได้กับเบราว์เซอร์ข้าม

ตามคำแนะนำของ @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();

ความหวังช่วยใครบางคน


"สิ่งนี้จะเล่นเสียงแจ้งเตือนแม้ว่าเบราว์เซอร์จะไม่ใช้งานหรือย่อขนาด" เสียงอาจเล่นหากมีการเรียกเมื่อหน้าอยู่ในโหมดสลีป แต่รหัสที่เรียกsound.play()ใช้ในตอนแรกอย่างไร Howler ใส่ setTimeouts ทั้งหมดของคุณไว้ใน Wrapper หรือไม่?
poshest

@ ที่สุดฉันไม่รู้ว่ามันเล่นยังไงอาจจะตรวจสอบซอร์สโค้ดหรือติดต่อผู้สร้างปลั๊กอินอาจช่วยคุณได้
shaijut

1
โอเคขอบคุณ. เพียงแค่คุณพูดถึงคุณลักษณะนี้และเชื่อมโยงคำตอบ Stackoverflow อื่น ๆ แต่ไม่ได้กล่าวถึงเป็นคุณลักษณะในเอกสาร Howlerดังนั้นฉันคิดว่าคุณรู้อะไรเป็นพิเศษเกี่ยวกับเรื่องนี้
poshest


2

หากคุณต้องการเรียกเหตุการณ์บนรหัสวิธีที่ดีที่สุดคือสร้างทริกเกอร์เนื่องจากเบราว์เซอร์จะไม่ตอบสนองหากผู้ใช้ไม่อยู่ในหน้า

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

ตอนนี้คุณสามารถเรียกใช้ปุ่มของคุณเมื่อคุณต้องการเล่นเสียง

$('#playSoundBtn').trigger('click');

0
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


0

เราสามารถใช้เสียงและวัตถุร่วมกันเช่น:

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

และยังเพิ่มaddEventListenerสำหรับplayและended


0

ฉันเขียนวิธีการเล่นเสียงที่ใช้งานได้สะอาด:

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