Hello.

It is necessary that with the incoming message on the site, the sound is played, by type, like a contact! How to implement it? Script for checking for messages is available, how to insert a playback of an audio file into it?

Solved the problem like this:

function soundClick() { var audio = new Audio(); // Создаём новый элемент Audio audio.src = 'n.mp3'; // Указываем путь к звуку "клика" audio.autoplay = true; // Автоматически запускаем }

3 answers 3

I suggest not to create an Audio object every time, because you can create it once and reuse it.

Below is a quick chat simulator

 function MessageClass(userName, text, avatarSrc, sendTime){ var self = this; this.UserName = userName; this.Text = text; this.SendTime = sendTime.toLocaleTimeString(); this.AvatarSrc = avatarSrc; } var chat = new function (){ var audio = document.createElement('audio'), source = document.createElement('source'), tid = 0; source.type = 'audio/mpeg'; source.src = 'http://dl.dropbox.com/u/1538714/article_resources/song.m4a'; audio.appendChild(source); this.Messages = ko.observableArray([]); this.Messages.subscribe(function (){ clearInterval(tid); audio.pause(); audio.currentTime = 0; audio.play(); // только потому что трек длинный tid = setTimeout(function(){ audio.pause(); }, 400); }); } ko.applyBindings(chat, document.getElementById("chat")); (function onMessage(){ chat.Messages.push( new MessageClass( faker.name.firstName() + ' ' + faker.name.lastName(), faker.hacker.phrase(), faker.image.avatar(), new Date() ) ); scrollTo(0, document.body.offsetHeight); setTimeout(onMessage, faker.random.number(1500) + 500); })(chat, faker); 
 fieldset{ position: relative; } fieldset:nth-child(2n){ margin-left:24px; } legend{ color:#0a0; } time{ position:absolute; right:12px; top:0px; background:#FFF; color: #a00; display:inline-block; padding: 0px 6px; font-size: 12px; } img{ float:left; width: 60px; margin-right: 12px; border-radius:30px; height:60px; } 
 <script src="//cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <div id='chat'> <div data-bind="foreach: Messages"> <fieldset> <legend data-bind="text: UserName"></legend> <img data-bind="attr: { src: AvatarSrc }" /> <time data-bind="text: SendTime"></time> <div data-bind="text: Text"></div> </fieldset> </div> </div>

And here you yourself can write messages:

  function MessageClass(userName, text, avatarSrc, sendTime){ var self = this; this.UserName = userName; this.Text = text; this.SendTime = sendTime.toLocaleTimeString(); this.AvatarSrc = avatarSrc; } var chat = new function (){ var self = this, tid = 0, audio = document.createElement('audio'), source = document.createElement('source'), generateFakeMessage = function (){ self.Messages.push( new MessageClass( faker.name.firstName() + ' ' + faker.name.lastName(), faker.hacker.phrase(), faker.image.avatar(), new Date() ) ); scrollTo(0, document.body.offsetHeight); }; source.type = 'audio/mpeg'; source.src = 'http://dl.dropbox.com/u/1538714/article_resources/song.m4a'; audio.appendChild(source); self.Messages = ko.observableArray([]); self.UserMessage = ko.observable(''); self.sendMessage = function(){ if (self.UserMessage()){ chat.Messages.push(new MessageClass( 'My account', self.UserMessage(), '//s3.amazonaws.com/uifaces/faces/twitter/psdesignuk/128.jpg', new Date() )); self.UserMessage(''); } setTimeout(generateFakeMessage, 1000); return false; }; self.Messages.subscribe(function (){ clearInterval(tid); audio.pause(); audio.currentTime = 1; audio.play(); // только потому что трек длинный tid = setTimeout(function(){ audio.pause(); }, 400); }); generateFakeMessage(); } ko.applyBindings(chat, document.getElementById("chat")); 
  fieldset{ position: relative; } fieldset:nth-child(2n){ margin-left:24px; } legend{ color:#0a0; } time{ position:absolute; right:12px; top:0px; background:#FFF; color: #a00; display:inline-block; padding: 0px 6px; font-size: 12px; } img{ float:left; width: 60px; margin-right: 12px; border-radius:30px; height:60px; } input, button{ margin-top:6px; width:100%; } 
  <script src="//cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <div id='chat'> <div data-bind="foreach: Messages"> <fieldset> <legend data-bind="text: UserName"></legend> <img data-bind="attr: { src: AvatarSrc }" /> <time data-bind="text: SendTime"></time> <div data-bind="text: Text"></div> </fieldset> </div> <div> <form data-bind="submit: sendMessage"> <input autofocus='autofocus' type="text" placeholder='Type your text here' data-bind="value: UserMessage" /> <button>send</button> </form> </div> </div>

In order not to load an audio file every time you play, you can use the closure:

 var soundClick = (function () { var audio = new Audio(); audio.src = 'http://freewavesamples.com/files/Yamaha-TG100-Ocarina-C5.wav'; return function () { audio.play(); }; })(); 
  <a href="" onclick="soundClick(); return false">Звук!</a>

    Ion.Sound plugin

    Here are some examples of use.

     // Настройка плагина ion.sound({ sounds: [ { name: "message_sound" } ], volume: 0.9, path: "sounds/", preload: true }); // Проигрываем звук! ion.sound.play("message_sound");