- Joined
- May 12, 2017
- Posts
- 3,829
- Solutions
- 8
- Reaction
- 7,299
- Points
- 1,711
Help po after button click po Page Personnel Button mag play ng audio chime.mp3 sa folder
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personnel Paging</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="C:\Desktop\pagging\logo.png" alt="Divimart">
<h1>Personnel Paging</h1>
<h1>by: UzuMackie</h1>
</header>
<main>
<label for="areaSelect">Select Area:</label>
<select id="areaSelect">
<option value="time keeping area">time keeping area</option>
<option value="bravo">bravo Section</option>
<option value="alpha">alpha Section</option>
<option value="Counter 1">Counter 1</option>
<option value="Counter 2">Counter 2</option>
<option value="Counter 3">Counter 3</option>
<option value="Counter 4">Counter 4</option>
<option value="Counter 5">Counter 5</option>
<option value="Counter 6">Counter 6</option>
<option value="Counter 7">Counter 7</option>
<option value="Counter 8">Counter 8</option>
<option value="Counter 9">Counter 9</option>
<option value="Counter ten">Counter ten</option>
<option value="o1">o1</option>
<option value="parking area">parking area</option>
<option value="receiving section">receiving section</option>
<option value="customer service section">customer service section</option>
<option value="your respective area">your respective area</option>
<!-- Add more options for other areas -->
</select>
<label for="personnelSelect">Select Personnel:</label>
<select id="personnelSelect">
<option value="toys">Toys Personnel</option>
<option value="maintenance">Maintenance Personnel</option>
<option value="beddings">Beddings Personnel</option>
<option value="Footware">Footware Personnel</option>
<option value="Cosmetic">Cosmetic Personnel</option>
<option value="Appliance">Appliances Personnel</option>
<option value="School Supply">School Supply Personnel</option>
<option value="Plasticware">Plasticware Personnel</option>
<option value="Kitchenware">Kitchenware Personnel</option>
<option value="Sale box">Sale box Personnel</option>
<option value="Household">Household Personnel</option>
<option value="Gift item">Gift items Personnel</option>
<option value="furniture">Furniture Personnel</option>
<option value="Salmon">Salmon Personnel</option>
<option value="Home Credit">Home Credit</option>
<option value="Store officer-01">S o 01</option>
<option value="HR-01">H R 01</option>
<option value="TRS-01">TRS 09</option>
<option value="FRONTLINE">FH 01</option>
<option value="FRONTLINE">CRA 1 8</option>
<option value="SUPERVISOR">SV01</option>
<option value="SUPERVISOR">SV02</option>
<option value="SUPERVISOR">SV03</option>
<option value="SUPERVISOR">SV04</option>
<option value="SUPERVISOR">SV05</option>
<option value="OFFICE STAFF">OS01</option>
<option value="OFFICE STAFF">OS02</option>
<option value="UTILITY">UM01</option>
<option value="ADMIN">ADMIN01</option>
<!-- Add more options for other personnel -->
</select>
<label for="voiceSelect">Select Voice:</label>
<select id="voiceSelect"></select>
<button id="pageButton">Page Personnel</button>
<audio id="chimeAudio" src="C:\Users\macki\Desktop\sample\chime.mp3"></audio>
</main>
<script src="script.js"></script>
</body>
</html>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
const areaSelect = document.getElementById('areaSelect');
const personnelSelect = document.getElementById('personnelSelect');
const voiceSelect = document.getElementById('voiceSelect');
// Load available voices
let voices = [];
function loadVoices() {
voices = window.speechSynthesis.getVoices();
voices.forEach((voice, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = voice.name;
voiceSelect.appendChild(option);
});
}
loadVoices();
// Update voices when they are changed
window.speechSynthesis.onvoiceschanged = loadVoices;
document.getElementById('pageButton').addEventListener('click', function() {
const selectedArea = areaSelect.options[areaSelect.selectedIndex].text;
const selectedPersonnel = personnelSelect.options[personnelSelect.selectedIndex].text;
const selectedVoice = voices[voiceSelect.value];
const message = `Calling the attention of ${selectedPersonnel} to ${selectedArea}. Once again ${selectedPersonnel} to ${selectedArea},please`;
// Text-to-speech functionality
const speech = new SpeechSynthesisUtterance();
speech.text = message;
speech.volume = 1; // 0 to 1
speech.rate = 1; // 0.1 to 10
speech.pitch = 2; // 0 to 2
speech.voice = selectedVoice;
window.speechSynthesis.speak(speech);
});
});