I recently created a soundboard using HTML5, CSS3, and JavaScript. While the audio plays back perfectly on my computer when I click the buttons, I encounter an issue when trying to use it on a smartphone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css">
<title> Soundboard </title>
<script lang="javascript" type="text/javascript">
var bleep = new Audio();
bleep.src = "5.mp3";
var bleep1 = new Audio();
bleep1.src = "6.mp3";
var bleep2 = new Audio();
bleep2.src = "7.mp3";
var bleep3 = new Audio();
bleep3.src = "8.mp3";
</head>
<body>
<nav id="nav2">
<a href="#" onmousedown="bleep5.play()">Gamsh!</a>
<a href="#" onmousedown="bleep6.play()">Gamsh!</a>
<a href="#" onmousedown="bleep7.play()">Gamsh!</a>
<a href="#" onmousedown="bleep8.play()">Gamsh!</a>
</nav>
</body>
While I have additional CSS3 and HTML5 code, this is the basic structure of my project. The buttons appear correctly on smartphones, but there is no sound when tapped. Can anyone provide suggestions on what adjustments or additions I need to make for it to function properly on mobile devices? Your feedback would be greatly appreciated. Thanks in advance.