├── .gitignore ├── README.md ├── babel.config.js ├── javascript_version ├── index.html └── style.css ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets └── style.css ├── components └── appHeader.vue └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # text-to-speech 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /javascript_version/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | Text To Speech | kablosuzkedi 13 |
14 | 15 |
16 | 17 |
18 |
19 | 20 |
21 | 22 |
23 | 26 |
27 |
28 | 31 |
32 | 33 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /javascript_version/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | /* font-family: "Exo 2", sans-serif; */ 11 | font-family: "Roboto", sans-serif; 12 | 13 | background-color: #fff; 14 | color: #333; 15 | } 16 | header { 17 | font-size: 20px; 18 | height: 64px; 19 | background-color: #c00201; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | margin-bottom: 20px; 24 | padding: 0 10px; 25 | color: white; 26 | } 27 | 28 | .app-container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | flex-direction: column; 33 | } 34 | 35 | select { 36 | width: 300px; 37 | height: 50px; 38 | font-size: 20px; 39 | background-color: #fefefe; 40 | outline: none; 41 | } 42 | 43 | textarea { 44 | width: 600px; 45 | resize: none; 46 | border: 1px solid #ccc; 47 | font-size: 18px; 48 | padding: 5px; 49 | outline: none; 50 | } 51 | 52 | .previewContainer { 53 | width: 600px; 54 | word-wrap: wrap; 55 | display: inline-block; 56 | margin-top: 10px; 57 | border: 1px solid #333; 58 | border-radius: 5px; 59 | padding: 10px 20px; 60 | } 61 | 62 | .spoken_word { 63 | color: #c00201; 64 | font-weight: bold; 65 | font-size: 18px; 66 | transition: all 0.1s; 67 | } 68 | 69 | /********* Range Slider CSS ********/ 70 | 71 | .slidecontainer { 72 | width: 100%; 73 | } 74 | .slider { 75 | -webkit-appearance: none; 76 | width: 300px; 77 | height: 15px; 78 | border-radius: 5px; 79 | background: #d3d3d3; 80 | outline: none; 81 | opacity: 0.7; 82 | -webkit-transition: opacity 0.15s ease-in-out; 83 | transition: opacity 0.15s ease-in-out; 84 | } 85 | 86 | .slider:hover { 87 | opacity: 1; 88 | } 89 | 90 | .slider::-webkit-slider-thumb { 91 | -webkit-appearance: none; 92 | appearance: none; 93 | width: 25px; 94 | height: 25px; 95 | background: #c00201; 96 | cursor: pointer; 97 | border-radius: 50%; 98 | } 99 | 100 | .slider::-moz-range-thumb { 101 | width: 25px; 102 | height: 25px; 103 | background: #c00201; 104 | cursor: pointer; 105 | } 106 | 107 | /*********************** Buttons *********************/ 108 | .btn { 109 | position: relative; 110 | 111 | display: block; 112 | padding: 0; 113 | 114 | overflow: hidden; 115 | 116 | border-width: 0; 117 | outline: none; 118 | border-radius: 2px; 119 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 120 | 121 | background-color: #2ecc71; 122 | color: #ecf0f1; 123 | 124 | transition: background-color 0.3s; 125 | } 126 | 127 | .btn:hover, 128 | .btn:focus { 129 | background-color: #27ae60; 130 | } 131 | 132 | .btn > * { 133 | position: relative; 134 | } 135 | 136 | .btn span { 137 | display: block; 138 | padding: 12px 24px; 139 | font-size: 18px; 140 | } 141 | 142 | .btn:before { 143 | content: ""; 144 | 145 | position: absolute; 146 | top: 50%; 147 | left: 50%; 148 | 149 | display: block; 150 | width: 0; 151 | padding-top: 0; 152 | 153 | border-radius: 100%; 154 | 155 | background-color: rgba(236, 240, 241, 0.3); 156 | 157 | -webkit-transform: translate(-50%, -50%); 158 | -moz-transform: translate(-50%, -50%); 159 | -ms-transform: translate(-50%, -50%); 160 | -o-transform: translate(-50%, -50%); 161 | transform: translate(-50%, -50%); 162 | } 163 | 164 | .btn:active:before { 165 | width: 120%; 166 | padding-top: 120%; 167 | 168 | transition: width 0.2s ease-out, padding-top 0.2s ease-out; 169 | } 170 | 171 | .btn.orange { 172 | background-color: #e67e22; 173 | } 174 | 175 | .btn.orange:hover, 176 | .btn.orange:focus { 177 | background-color: #d35400; 178 | } 179 | 180 | .btn.red { 181 | background-color: #c00201; 182 | } 183 | 184 | .btn.red:hover, 185 | .btn.red:focus { 186 | background-color: #c0392b; 187 | } 188 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "text-to-speech", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.4", 11 | "vue": "^2.6.11" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^4.3.0", 15 | "@vue/cli-service": "^4.3.0", 16 | "vue-template-compiler": "^2.6.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not dead" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gkandemi/vue-text-to-speech/41cc026cf10c0ddcb1d009af59e1e1285e28a8f2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Text To Speech | kablosuzkedi 9 | 10 | 11 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 116 | -------------------------------------------------------------------------------- /src/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | /* font-family: "Exo 2", sans-serif; */ 11 | font-family: "Roboto", sans-serif; 12 | 13 | background-color: #fff; 14 | color: #333; 15 | } 16 | header { 17 | font-size: 20px; 18 | height: 64px; 19 | background-color: #c00201; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | margin-bottom: 20px; 24 | padding: 0 10px; 25 | color: white; 26 | } 27 | 28 | .app-container { 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | flex-direction: column; 33 | } 34 | 35 | select { 36 | width: 300px; 37 | height: 50px; 38 | font-size: 20px; 39 | background-color: #fefefe; 40 | outline: none; 41 | } 42 | 43 | textarea { 44 | width: 600px; 45 | resize: none; 46 | border: 1px solid #ccc; 47 | font-size: 18px; 48 | padding: 5px; 49 | outline: none; 50 | } 51 | 52 | .previewContainer { 53 | width: 600px; 54 | word-wrap: wrap; 55 | display: inline-block; 56 | margin-top: 10px; 57 | border: 1px solid #333; 58 | border-radius: 5px; 59 | padding: 10px 20px; 60 | } 61 | 62 | .spoken_word { 63 | color: #c00201; 64 | font-weight: bold; 65 | font-size: 18px; 66 | transition: all 0.1s; 67 | } 68 | 69 | /********* Range Slider CSS ********/ 70 | 71 | .slidecontainer { 72 | width: 100%; 73 | } 74 | .slider { 75 | -webkit-appearance: none; 76 | width: 300px; 77 | height: 15px; 78 | border-radius: 5px; 79 | background: #d3d3d3; 80 | outline: none; 81 | opacity: 0.7; 82 | -webkit-transition: opacity 0.15s ease-in-out; 83 | transition: opacity 0.15s ease-in-out; 84 | } 85 | 86 | .slider:hover { 87 | opacity: 1; 88 | } 89 | 90 | .slider::-webkit-slider-thumb { 91 | -webkit-appearance: none; 92 | appearance: none; 93 | width: 25px; 94 | height: 25px; 95 | background: #c00201; 96 | cursor: pointer; 97 | border-radius: 50%; 98 | } 99 | 100 | .slider::-moz-range-thumb { 101 | width: 25px; 102 | height: 25px; 103 | background: #c00201; 104 | cursor: pointer; 105 | } 106 | 107 | /*********************** Buttons *********************/ 108 | .btn { 109 | position: relative; 110 | 111 | display: block; 112 | padding: 0; 113 | 114 | overflow: hidden; 115 | 116 | border-width: 0; 117 | outline: none; 118 | border-radius: 2px; 119 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 120 | 121 | background-color: #2ecc71; 122 | color: #ecf0f1; 123 | 124 | transition: background-color 0.3s; 125 | } 126 | 127 | .btn:hover, 128 | .btn:focus { 129 | background-color: #27ae60; 130 | } 131 | 132 | .btn > * { 133 | position: relative; 134 | } 135 | 136 | .btn span { 137 | display: block; 138 | padding: 12px 24px; 139 | font-size: 18px; 140 | } 141 | 142 | .btn:before { 143 | content: ""; 144 | 145 | position: absolute; 146 | top: 50%; 147 | left: 50%; 148 | 149 | display: block; 150 | width: 0; 151 | padding-top: 0; 152 | 153 | border-radius: 100%; 154 | 155 | background-color: rgba(236, 240, 241, 0.3); 156 | 157 | -webkit-transform: translate(-50%, -50%); 158 | -moz-transform: translate(-50%, -50%); 159 | -ms-transform: translate(-50%, -50%); 160 | -o-transform: translate(-50%, -50%); 161 | transform: translate(-50%, -50%); 162 | } 163 | 164 | .btn:active:before { 165 | width: 120%; 166 | padding-top: 120%; 167 | 168 | transition: width 0.2s ease-out, padding-top 0.2s ease-out; 169 | } 170 | 171 | .btn.orange { 172 | background-color: #e67e22; 173 | } 174 | 175 | .btn.orange:hover, 176 | .btn.orange:focus { 177 | background-color: #d35400; 178 | } 179 | 180 | .btn.red { 181 | background-color: #c00201; 182 | } 183 | 184 | .btn.red:hover, 185 | .btn.red:focus { 186 | background-color: #c0392b; 187 | } 188 | -------------------------------------------------------------------------------- /src/components/appHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | 4 | import "@/assets/style.css"; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | render: h => h(App) 10 | }).$mount("#app"); 11 | --------------------------------------------------------------------------------