mirror of
				https://gitlab.com/gpvkt/twitchtts.git
				synced 2025-10-31 00:57:35 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			47 lines
		
	
	
	
		
			1.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			47 lines
		
	
	
	
		
			1.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html lang="de">
 | |
|   <head>
 | |
|     <link href="./bootstrap.min.css" rel="stylesheet" />
 | |
|     <title>TTS</title>
 | |
|     <script src="./jquery.js"></script>
 | |
|   </head>
 | |
|   <body class="container mt-2">
 | |
|     <p class="lead mt-2">Select Voice</p>
 | |
|     <select id="voices" class="form-select bg-transparent"></select>
 | |
|     <div class="d-flex mt-2">
 | |
|       <div>
 | |
|         <p class="lead">Volume</p>
 | |
|         <input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
 | |
|         <span id="volume-label" class="ms-2">1</span>
 | |
|       </div>
 | |
|       <div class="mx-4">
 | |
|         <p class="lead">Rate</p>
 | |
|         <input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
 | |
|         <span id="rate-label" class="ms-2">1</span>
 | |
|       </div>
 | |
|       <div>
 | |
|         <p class="lead">Pitch</p>
 | |
|         <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
 | |
|         <span id="pitch-label" class="ms-2">1</span>
 | |
|       </div>
 | |
|     </div>
 | |
|     <div>
 | |
|       <button id="start" class="btn btn-success mt-4 me-2">Init</button>
 | |
|       <button id="pause" class="btn btn-warning mt-4 me-2">Pause</button>
 | |
|       <button id="resume" class="btn btn-info mt-4 me-2">Resume</button>
 | |
|       <button id="cancel" class="btn btn-danger mt-4 me-2">Cancel</button>
 | |
|     </div>
 | |
|   </body>
 | |
|   <script src="./tts.js"></script>
 | |
|   <script>
 | |
|     $(document).ready ( function(){
 | |
|       if (window.matchMedia) {
 | |
|         if(window.matchMedia('(prefers-color-scheme: dark)').matches){
 | |
|           $('body').addClass('bg-dark');
 | |
|           $('p').addClass('text-light');
 | |
|           $('select').addClass('text-light');
 | |
|           $('span').addClass('text-light');
 | |
|         }
 | |
|       }
 | |
|     });
 | |
|     </script>
 | |
| </html>
 |