Add volume option

manifest.json

@@ -3,7 +3,7 @@
 
   "name": "YouTube live chat text2speech",
   "description": "This extension reads every message on YouTube live chat.",
-  "version": "0.7.1.6",
+  "version": "0.7.1.7",
   "author": "lopezloo",
   "homepage_url": "https://github.com/lopezloo/yt-live-text2speech",
 

options.html

@@ -7,6 +7,7 @@
 <p>Emojis: <input id="emojis" type="checkbox"></p>
 <p>Speed: <input id="rate" type="number" step="0.01" min="0.1" max="10"></p>
 <p>Pitch: <input id="pitch" type="number" step="0.01" min="0" max="2"></p>
+<p>Volume: <input id="volume" type="number" step="0.01" min="0" max="1"></p>
 <p id="status"></p>
 
 <script src="options.js"></script>

options.js

@@ -1,24 +1,27 @@
 document.addEventListener('DOMContentLoaded', function() {
-	var voiceSelect = document.getElementById('voice');
-	var emojisCheck = document.getElementById('emojis');
-	var rateInput = document.getElementById('rate');
-	var pitchInput = document.getElementById('pitch');
-	var statusText = document.getElementById('status');
+	let voiceSelect = document.getElementById('voice');
+	let emojisCheck = document.getElementById('emojis');
+	let rateInput = document.getElementById('rate');
+	let pitchInput = document.getElementById('pitch');
+	let volumeInput = document.getElementById('volume');
+	let statusText = document.getElementById('status');
 
 	function saveChanges() {
-		var voice = voiceSelect.options[voiceSelect.selectedIndex].value;
-		var emojis = emojisCheck.checked;
-		var voiceRate = rateInput.value;
-		var voicePitch = pitchInput.value;
+		let voice = voiceSelect.options[voiceSelect.selectedIndex].value;
+		let emojis = emojisCheck.checked;
+		let voiceRate = rateInput.value;
+		let voicePitch = pitchInput.value;
+		let voiceVolume = volumeInput.value;
 
 		chrome.storage.sync.set({
 			voiceType: voice,
 			emojisEnabled: emojis,
 			voiceRate: voiceRate,
-			voicePitch: voicePitch
+			voicePitch: voicePitch,
+			voiceVolume: voiceVolume,
 		}, function() {
 			statusText.textContent = 'Options saved.';
-			console.log('saveChanges: voice: ' + voice + ' emojis: ' + emojis + ' rate: ' + voiceRate + ' pitch: ' + voicePitch);
+			console.log('Changes saved! Voice: ' + voice + '; emojis: ' + emojis + '; rate: ' + voiceRate + '; pitch: ' + voicePitch + '; volume: ' + voiceVolume);
 		});
 	}
 
@@ -28,33 +31,42 @@ document.addEventListener('DOMContentLoaded', function() {
 			voiceType: '',
 			emojisEnabled: true,
 			voiceRate: 1.0,
-			voicePitch: 1.0
+			voicePitch: 1.0,
+			voiceVolume: 1.0,
 		}, function(items) {
-			console.log('loadOptions: voice: ' + items.voiceType + ' emojis: ' + items.emojisEnabled + ' rate: ' + items.voiceRate + ' pitch: ' + items.voicePitch);
+			console.log('Options loaded! Voice: ' + items.voiceType + '; emojis: ' + items.emojisEnabled + '; rate: ' + items.voiceRate + '; pitch: ' + items.voicePitch + '; volume: ' + items.voiceVolume);
 			voiceSelect.value = items.voiceType;
 			emojisCheck.checked = items.emojisEnabled;
 			rateInput.value = items.voiceRate;
 			pitchInput.value = items.voicePitch;
+			volumeInput.value = items.voiceVolume;
 		});
 	}
-	loadOptions();
 
 	voiceSelect.addEventListener('change', saveChanges);
 	emojisCheck.addEventListener('change', saveChanges);
 	rateInput.addEventListener('change', saveChanges);
 	pitchInput.addEventListener('change', saveChanges);
+	volumeInput.addEventListener('change', saveChanges);
 
 	window.speechSynthesis.onvoiceschanged = function() {
-		var voices = speechSynthesis.getVoices();
+		let voices = speechSynthesis.getVoices();
 		for(i = 0; i < voices.length; i++) {
-			var option = document.createElement('option');
-			option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+			let option = document.createElement('option');
+			option.textContent = voices[i].name;
+			if(voices[i].lang !== '') {
+				option.textContent += ' (' + voices[i].lang + ')';	
+			}
+			if(voices[i].localService) {
+				option.textContent += ' (local)';
+			} else {
+				option.textContent += ' (network)';
+			}
 			option.value = voices[i].lang;
 			option.setAttribute('data-name', voices[i].name);
 			voiceSelect.appendChild(option);
-
-			console.log('Voice: ' + voices[i].lang + ' | local: ' + voices[i].localService);
 		}
 		console.log('Options: loaded ' + voices.length + ' voices.');
+		loadOptions();
 	};
 });

script.js

@@ -4,6 +4,7 @@ var options = {
 	emojisEnabled: true,
 	voiceRate: 1.0,
 	voicePitch: 1.0,
+	voiceVolume: 1.0,
 }
 
 function loadOptions() {
@@ -12,13 +13,15 @@ function loadOptions() {
 		voiceType: '',
 		emojisEnabled: true,
 		voiceRate: 1.0,
-		voicePitch: 1.0
+		voicePitch: 1.0,
+		voiceVolume: 1.0,
 	}, function(items) {
 		options.voiceType = items.voiceType;
 		options.emojisEnabled = items.emojisEnabled;
 		options.voiceRate = items.voiceRate;
 		options.voicePitch = items.voicePitch;
-		console.log('loadOptions: voice: ' + items.voiceType + ' emojis: ' + items.emojisEnabled + ' rate: ' + items.voiceRate + ' pitch: ' + items.voicePitch);
+		options.voiceVolume = items.voiceVolume;
+		console.log('loadOptions: voice: ' + items.voiceType + ' emojis: ' + items.emojisEnabled + ' rate: ' + items.voiceRate + ' pitch: ' + items.voicePitch + ' volume: ' + items.voiceVolume);
 	});
 }
 loadOptions();
@@ -28,7 +31,7 @@ function updateVoice() {
 	for(i = 0; i < voices.length; i++) {
 		if(voices[i].lang == options.voiceType) {
 			options.voice = voices[i];
-			console.log('Using voice: ' + voices[i].name + ' (' + voices[i].lang + ')' + ' (localService: ' + voices[i].localService + ')')
+			console.log('Using voice: ' + voices[i].name + ' (' + voices[i].lang + ')' + ' (local: ' + voices[i].localService + ')')
 			break;
 		}
 	}
@@ -47,7 +50,10 @@ chrome.storage.onChanged.addListener(function(changes, areaName) {
 	if(changes.voicePitch) {
 		options.voicePitch = changes.voicePitch.newValue;
 	}
-	console.log('Options changed. Voice: ' + options.voiceType + ' Emojis: ' + options.emojisEnabled + ' rate: ' + options.voiceRate + ' pitch: ' + options.voicePitch);
+	if(changes.voiceVolume) {
+		options.voiceVolume = changes.voiceVolume.newValue;
+	}
+	console.log('Options changed. Voice: ' + options.voiceType + ' Emojis: ' + options.emojisEnabled + ' rate: ' + options.voiceRate + ' pitch: ' + options.voicePitch + ' volume: ' + options.voiceVolume);
 	updateVoice();
 })
 
@@ -91,6 +97,7 @@ class ChatWatcher {
 				u.voice = options.voice;
 				u.rate = options.voiceRate;
 				u.pitch = options.voicePitch;
+				u.volume = options.voiceVolume;
 				speechSynthesis.speak(u);
 
 				// Thanks to: https://gist.github.com/mapio/967b6a65b50d39c2ae4f