首页 文章

如何在网站上播放通知声音？

提问于
浏览 次
92

当某个事件发生时，我希望我的网站向用户播放简短的通知声音。

当网站打开时，声音应该**** _(_立即)。相反，它应该通过 JavaScript 按需播放(当某个事件发生时)。

重要的是，这也适用于旧浏览器(IE6 等)。

所以，基本上有两个问题：

  • 我应该使用什么编解码器？

  • 嵌入音频文件的最佳做法是什么？ (<embed> vs. <object> vs. Flash vs. <audio>)

javascript html audio notifications html5-audio

9 回答

  • 90

    此解决方案适用于几乎所有浏览器(即使没有安装 Flash)：

    <!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      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>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

    浏览器支持

    使用的代码

    • 适用于 Chrome，Safari 和 Internet Explorer 的 MP3。

    • 适用于 Firefox 和 Opera 的 OGG。

    回复于
  • 60

    截至 2016 年，以下内容就足够了(您甚至不需要嵌入)：

    let audio = new Audio('/path/to/audio/file.mp3');
audio.play();

    查看更多这里。

    回复于
  • 14

    还有一个插件，用于在网站上播放通知声音：Ion.Sound

    好处：

    • JavaScript-plugin 用于播放基于 Web Audio API 的声音，并回退到 HTML5 音频。

    • 插件适用于大多数流行的桌面和移动浏览器，可以在任何地方使用，从常见的网站到浏览器游戏。

    • Audio-sprites 支持包括在内。

    • 没有任何依赖(不需要 jQuery)。

    • 包括 25 free 声音。

    设置插件：

    // 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");
    回复于
  • 5

    雅虎的媒体播放器怎么样只是嵌入了雅虎的图书馆

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

    并使用它

    <a id="beep" href="song.mp3">Play Song</a>

    自动启动

    $(function() { $("#beep").click(); });
    回复于
  • 3

    播放跨浏览器兼容的通知

    正如这个帖子所述 by_3_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();

    希望帮助某人。

    回复于
  • 2

    使用audio.js这是<audio>标签的 polyfill，后备闪存。

    通常，查看https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills以获取 HTML 5 API 的 polyfills ..(它包含更多<audio> polyfills)

    回复于
  • 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();

    甚至为play和ended添加addEventListener

    回复于
  • 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;
}
    回复于

相关问题