API tools faq
paste
Advertisement
Thunder-Menu

Voice_System.html

Thunder-Menu
Nov 5th, 2023
717
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.43 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Personnalisation de la voix</title>
  7. </head>
  8. <body>
  9.     <h1>Personnalisez la voix</h1>
  10.    
  11.     <p>Choisir une voix: <select id="voiceSelect" onchange="saveSettings()"></select></p>
  12.     <p>Message: <textarea id="messageInput" oninput="saveSettings()">Bonjour! Comment allez-vous?</textarea></p>
  13.  
  14.     <p>
  15.         Tonalité (Pitch) : <input id="pitchSlider" type="range" min="0" max="500" step="1" value="100" oninput="updatePitchValue(); saveSettings();">
  16.         Valeur actuelle : <span id="pitchValue">100</span>
  17.     </p>
  18.     <p>
  19.         Vitesse (Rate) : <input id="rateSlider" type="range" min="0" max="500" step="1" value="100" oninput="updateRateValue(); saveSettings();">
  20.         Valeur actuelle : <span id="rateValue">100</span>
  21.     </p>
  22.     <p>
  23.         Volume : <input id="volumeSlider" type="range" min="0" max="500" step="1" value="100" oninput="updateVolumeValue(); saveSettings();">
  24.         Valeur actuelle : <span id="volumeValue">100</span>
  25.     </p>
  26.  
  27.     <button onclick="speak()">Écouter la voix</button>
  28.     <button id="toggleMicButton" onclick="toggleMicrophone()">Activer le Microphone</button>
  29.     <p id="micStatus">Microphone: Désactivé</p>
  30.  
  31.     <script>
  32.         let voices = [];
  33.  
  34.         function populateVoices() {
  35.             voices = window.speechSynthesis.getVoices();
  36.             const voiceSelect = document.getElementById('voiceSelect');
  37.             voiceSelect.innerHTML = '';
  38.             voices.forEach((voice, index) => {
  39.                 const option = document.createElement('option');
  40.                 option.value = index;
  41.                 option.textContent = `${voice.name} (${voice.lang})`;
  42.                 voiceSelect.appendChild(option);
  43.             });
  44.             loadSettings();
  45.         }
  46.  
  47.         populateVoices();
  48.         if (window.speechSynthesis.onvoiceschanged !== undefined) {
  49.             window.speechSynthesis.onvoiceschanged = populateVoices;
  50.         }
  51.  
  52.         function updatePitchValue() {
  53.             document.getElementById('pitchValue').textContent = document.getElementById('pitchSlider').value;
  54.         }
  55.  
  56.         function updateRateValue() {
  57.             document.getElementById('rateValue').textContent = document.getElementById('rateSlider').value;
  58.         }
  59.  
  60.         function updateVolumeValue() {
  61.             document.getElementById('volumeValue').textContent = document.getElementById('volumeSlider').value;
  62.         }
  63.  
  64.         function speak() {
  65.             const message = document.getElementById('messageInput').value;
  66.             const utterance = new SpeechSynthesisUtterance(message);
  67.             const selectedVoiceIndex = document.getElementById('voiceSelect').value;
  68.             utterance.voice = voices[selectedVoiceIndex];
  69.             utterance.pitch = parseFloat(document.getElementById('pitchSlider').value) / 100;
  70.             utterance.rate = parseFloat(document.getElementById('rateSlider').value) / 100;
  71.             utterance.volume = parseFloat(document.getElementById('volumeSlider').value) / 100;
  72.             window.speechSynthesis.speak(utterance);
  73.         }
  74.  
  75.         function saveSettings() {
  76.             const settings = {
  77.                 selectedVoice: document.getElementById('voiceSelect').value,
  78.                 pitch: document.getElementById('pitchSlider').value,
  79.                 rate: document.getElementById('rateSlider').value,
  80.                 volume: document.getElementById('volumeSlider').value,
  81.                 message: document.getElementById('messageInput').value
  82.             };
  83.             localStorage.setItem('voiceSettings', JSON.stringify(settings));
  84.         }
  85.  
  86.         function loadSettings() {
  87.             const savedSettings = localStorage.getItem('voiceSettings');
  88.             if (savedSettings) {
  89.                 const settings = JSON.parse(savedSettings);
  90.                 document.getElementById('voiceSelect').value = settings.selectedVoice;
  91.                 document.getElementById('pitchSlider').value = settings.pitch;
  92.                 document.getElementById('rateSlider').value = settings.rate;
  93.                 document.getElementById('volumeSlider').value = settings.volume;
  94.                 document.getElementById('messageInput').value = settings.message;
  95.                 updatePitchValue();
  96.                 updateRateValue();
  97.                 updateVolumeValue();
  98.             }
  99.         }
  100.  
  101.         let micStream = null;
  102.  
  103.         async function toggleMicrophone() {
  104.             const micStatusElement = document.getElementById('micStatus');
  105.  
  106.             if (micStream) {
  107.                 micStream.getTracks().forEach(track => track.stop());
  108.                 micStream = null;
  109.                 micStatusElement.textContent = "Microphone: Désactivé";
  110.                 document.getElementById('toggleMicButton').textContent = "Activer le Microphone";
  111.             } else {
  112.                 try {
  113.                     micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  114.                     micStatusElement.textContent = "Microphone: Activé";
  115.                     document.getElementById('toggleMicButton').textContent = "Désactiver le Microphone";
  116.                 } catch (error) {
  117.                     micStatusElement.textContent = "Erreur lors de l'accès au microphone: " + error;
  118.                 }
  119.             }
  120.         }
  121.     </script>
  122. </body>
  123. </html>
  124.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!