How to add error sound in PHP using javascript or jquery
Get the solution ↓↓↓
Need to know how to add a small error sound in PHP when a user enters a wrong password. Below is code being used.I know I have to use js or jquery to play the sound and was hoping if someone could help me with this.Thanks in Advance.
<?php
include "header.php";
if (isset($_GET['loginFailed'])) {
$message = "Invalid Credentials ! Please try again.";
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="admin_login_style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="./admin_login_action.php" method="post">
<div class="flex-container-1">
<div class="flex-item">
<h2>Administrator Login</h2>
</div>
<label><b>Username</b></label>
<div class="flex-item">
<input type="text" name="admin_uname" required>
</div>
<label><b>Password</b></label>
<div class="flex-item">
<input type="password" name="admin_psw" required>
</div>
</div>
<div class="flex-container-2">
<div class="flex-item">
<button type="submit">Login</button>
</div>
<div class="flex-item">
<button type="button" class="cancelbtn">Cancel</button>
</div>
</div>
</form>
</body>
</html>
Answer
Solution:
Because of security purpose, The Chrome or some modern browsers does not play the sound automatically without user interaction.
The following alert message arise in Console if we try to play the sound on page load.
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
You can play a sound with some interaction using the following 2 methods that i found to be the best ones among others.
Using Default HTML+JS Method:
<audio id="my_audio" src="http://www.noiseaddicts.com/samples_1w72b820/3724.mp3" loop="loop"></audio>
document.getElementById("my_audio").play(); // Using JS
// $("#my_audio").get(0).play(); // Using jQuery
Using jQuery playSound library:
<script src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script src='https://cdn.rawgit.com/admsev/jquery-play-sound/master/jquery.playSound.js'></script>
<script>
$.playSound("http://www.noiseaddicts.com/samples_1w72b820/3724.mp3");
</script>
Answer
Solution:
You could use PHP to echo html audio tag on error...
if (isset($_GET['loginFailed'])) {
$message = "Invalid Credentials ! Please try again.";
echo "<script type='text/javascript'>alert('$message');</script>";
echo '<audio autoplay><source src="error.mp3"></audio>';
}
The only drawback is that browsers these days will ask the user to allow autoplay sounds.Like stated on the other answer.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: warning: a non-numeric value encountered in
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.