11540 sujets

JavaScript, DOM et API Web HTML5

Alerte sonore Nouveau Message Tchat / js / jquery

Bonjour à tous,

grand utilisateur du forum, j'ai toujours trouvé une solution à mes problèmes mais la je coince,

je sollicite donc pour la première fois votre aide sur un problème que j'ai en ce moment.

(à noter que je suis débutant avec quelques bases)

Voilà, j'ai crée pour un petit que je suis entrain de faire, un chat en php/js, tout ce qu'il y a de plus simple, avec envoi d'un message, affichage du message et du pseudo.

Le chat fonctionne parfaitement, on peut envoyer, recevoir des messages... mon seul soucis est que je souhaiterai ajouter une alerte sonore lorsqu'un nouveau message
est reçu sur le chat, malheureusement impossible de trouver mon bonheur bien qu'ayant parcouru les forums, et beaucoup de sites?

Pour que ce soit plus clair voici mon code.
j'ai 3 pages. Une page Html avec le formulaire "pseudo" et "texte", une seconde page Php qui traite les informations du formulaire et enfin un page Javascript qui permet
d'actualiser ma div dans mon fichier Html afin de recevoir les messages postés.

- Page Html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<title>Mini-Chat</title>
<script type="text/javascript" src="minichat.js"></script>
</head>
<body onload="refreshChat();">
 
<h1>Mini-Chat</h1>
 
<div id="minichat"></div>
 
<p>
Pseudo : <br/><input type="text" name="pseudo" id="pseudo" /><br />
Message : <br/><textarea name="message" rows="5" cols="30" id="message"></textarea><br />
<input type="button" value="Envoyer" onclick="submitChat();" />
</p>

</body>
</html>



Et voici mon fichier Javascript


function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
 
function refreshChat()
{
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById('minichat').innerHTML = xhr.responseText; // DonnÈes textuelles rÈcupÈrÈes
        }
};
 
xhr.open("GET", "minichat.php", true);
xhr.send(null);
}
 
function submitChat()
{
var xhr = getXMLHttpRequest();
var pseudo = encodeURIComponent(document.getElementById('pseudo').value);
var message = encodeURIComponent(document.getElementById('message').value);
document.getElementById('message').value = ""; // on vide le message sur la page
 
xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                document.getElementById('minichat').innerHTML = xhr.responseText; // DonnÈes textuelles rÈcupÈrÈes
        }
};
 
xhr.open("POST", "minichat.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("pseudo="+pseudo+"&message="+message);
 
}
var timer=setInterval("refreshChat()", 5000);


Si quelqu'un aurait une solution ou astuce afin que l'on puisse entendre un petit son dès qu'on reçoit un nouveau message,
je vous en serait très reconnaissant.

Merci beaucoup par avant de votre aide.

-
Edité par budfoxob il y a 7 minutes
Modifié par budfoxob (07 Jun 2014 - 18:55)
Modérateur
Bonjour,

Une possibilité est d'utiliser l’élément html audio. Sous forme javascript, ça peut donner ce qui suit (en supposant que le son à émettre est dans un fichier nommé "beepbeep.mp3", mais ça pourrait être n'importe quoi d'autre) :


function mySoNiceSound(s)
{
	var e=document.createElement('audio');
	e.setAttribute('src',s);
	e.play();
}

mySoNiceSound('beepbeep.mp3');


Deux contraintes à cette solution : il faut que le navigateur connaisse HTML5 et qu'il comprenne le format du fichier audio qui va être utilisé. Pour ce deuxième point, on peut éventuellement tester ce que le navigateur sait jouer comme son avec plus ou moins de fiabilité et si l'on dispose du son voulu en plusieurs formats, il suffit alors de passer en paramètre de la fonction mySoNiceSound() le nom du fichier audio dans le format qui va bien (on peut se contenter des formats .ogg, .wav et .mp3).

Amicalement,
Sujet clos
Aller à