index.html 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Textless Acoustic Model with Self-Supervised Distillation for Noise-Robust Expressive Speech-to-Speech Translation</title>
  6. <link rel="stylesheet" type="text/css" href="styles.css">
  7. <script src="jquery-3.5.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <div id="text1">Textless Acoustic Model with Self-Supervised Distillation for Noise-Robust Expressive Speech-to-Speech Translation</div>
  12. <div id="intro">
  13. <br>
  14. <p>
  15. Min-Jae Hwang, Ilia Kulikov, Benjamin Peloquin, Hongyu Gong, Peng-Jen Chen, and Ann Lee
  16. </p>
  17. <!-- <p>
  18. [<a href="https://arxiv.org/abs/2204.02967">paper</a>]
  19. </p> -->
  20. </div>
  21. </div>
  22. <div class="content-container">
  23. <div class="content-title">
  24. <font size="+5">Abstract</font>
  25. </div>
  26. <p>
  27. In this paper, we propose a textless acoustic model with a self-supervised distillation strategy for noise-robust expressive speech-to-speech translation (S2ST).
  28. Recently proposed expressive S2ST systems have achieved impressive expressivity preservation performances by cascading unit-to-speech (U2S) generator to the speech-to-unit translation model.
  29. However, these systems are vulnerable to the presence of noise in input speech, which is an assumption in real-world translation scenarios.
  30. To address this limitation, we propose a U2S generator that incorporates a DINO self-supervised training strategy into it's pretraining process.
  31. Because the proposed method captures noise-agnostic expressivity representation, it can generate qualified speech even in noisy environment.
  32. Objective and subjective evaluation results verified that the proposed method significantly improved the performance of the expressive S2ST system in noisy environments while maintaining competitive performance in clean environments.
  33. </p>
  34. <ul>
  35. <li><strong>S2ST using Benchmarking Dataset</strong></li>
  36. <ul>
  37. <li><a style="color:rgb(90, 4, 83)" href="#eng-spa-mexpresso">mExpresso English-to-Spanish [1]</a></li>
  38. </ul>
  39. <ul>
  40. <li><a style="color:rgb(90, 4, 83)" href="#spa-eng-mdral">mDRAL Spanish-to-English [1]</a></li>
  41. </ul>
  42. <br>
  43. <li><strong>S2ST using Authors' Speech</strong></li>
  44. <ul>
  45. <li><a style="color:rgb(90, 4, 83)" href="#eng-spa-author">English-to-Spanish</a></li>
  46. </ul>
  47. <ul>
  48. <li><a style="color:rgb(90, 4, 83)" href="#spa-eng-author">Spanish-to-English</a></li>
  49. </ul>
  50. </ul>
  51. </div>
  52. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  53. <div id="Systems" class="content-container">
  54. <div class="content-title">
  55. <font size="+5">Systems</font>
  56. </div>
  57. <p> We provide source speech as well as audio samples from four systems: <br>
  58. <!-- (1) <strong>S2TT + TTS</strong>: We combined a SeamlessM4T V2's S2TT module and Coqui-XTTS V2 model.
  59. For the expressivity transfer, the source speech of SeamlessM4T V2 was conditioned to Coqui-XTTS V2. -->
  60. (1) <strong>PRETSSEL</strong>: We combined a Prosody UnitY2 and PRETSSEL model [1].
  61. <br>
  62. (2) <strong>PRETSSEL + Denoiser</strong>: We combined a Prosody UnitY2 and PRETSSEL with high-quality speech enhancement model.
  63. Specifically, we applied MetricGAN+ denoiser [3] to the input of PRETSSEL for removing noise components.
  64. <br>
  65. (3) <strong>DINO-PRETSSEL (proposed)</strong>: We combined a Prosody UnitY2 and proposed DINO-PRETSSEL.
  66. </p>
  67. </div>
  68. <div id="benchmark_data" class="content-container">
  69. <script src="wavesurfer.js"></script>
  70. <div class="content-title">
  71. <font size="+5">S2ST using Benchmarking Dataset</font>
  72. </div>
  73. <hr>
  74. <div id="eng-spa-mexpresso" class="content-subtitle">mExpresso English-to-Spanish [1]
  75. </div>
  76. <table border="0" class="inlineTable">
  77. <tr>
  78. <th></th>
  79. <th>Source</th>
  80. <th style="color:blue">PRETSSEL (conventional)</th>
  81. <th>PRETSSEL + Denoiser</th>
  82. <th style="color:red">DINO-PRETSSEL (proposed)</th>
  83. </tr>
  84. <tr>
  85. <th colspan="5" style="text-align:left">Sample 1</th>
  86. </tr>
  87. <tr>
  88. <th>Clean environment</th>
  89. <th>
  90. <div id="mexp_clean_src_waveform2_1"></div>
  91. <button id="written_source__header" class="play-button-demo btn btn-primary"
  92. onclick="mexp_clean_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  93. </button>
  94. <script> var mexp_clean_src_waveform2_1 = WaveSurfer.create({ container: '#mexp_clean_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  95. mexp_clean_src_waveform2_1.load('./audios/mexpresso_eng_spa/clean/ref/s07_default_00066.wav'); </script>
  96. </th>
  97. <th>
  98. <div id="mexp_clean_pretssel_waveform2_1"></div>
  99. <button id="written_source__header" class="play-button-demo btn btn-primary"
  100. onclick="mexp_clean_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  101. </button>
  102. <script> var mexp_clean_pretssel_waveform2_1 = WaveSurfer.create({ container: '#mexp_clean_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  103. mexp_clean_pretssel_waveform2_1.load('./audios/mexpresso_eng_spa/clean/pretssel/s07_default_00066.wav'); </script>
  104. </th>
  105. <th>
  106. <div id="mexp_clean_pretssel_denoiser_waveform2_1"></div>
  107. <button id="written_source__header" class="play-button-demo btn btn-primary"
  108. onclick="mexp_clean_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  109. </button>
  110. <script> var mexp_clean_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#mexp_clean_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  111. mexp_clean_pretssel_denoiser_waveform2_1.load('./audios/mexpresso_eng_spa/clean/pretssel+denoiser/s07_default_00066.wav'); </script>
  112. </th>
  113. <th>
  114. <div id="mexp_clean_dinopretssel_waveform2_1"></div>
  115. <button id="written_source__header" class="play-button-demo btn btn-primary"
  116. onclick="mexp_clean_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  117. </button>
  118. <script> var mexp_clean_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#mexp_clean_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  119. mexp_clean_dinopretssel_waveform2_1.load('./audios/mexpresso_eng_spa/clean/dinopretssel/s07_default_00066.wav'); </script>
  120. </th>
  121. </tr>
  122. <tr>
  123. <th>Noisy environment</th>
  124. <th>
  125. <div id="mexp_noisy_src_waveform2_1"></div>
  126. <button id="written_source__header" class="play-button-demo btn btn-primary"
  127. onclick="mexp_noisy_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  128. </button>
  129. <script> var mexp_noisy_src_waveform2_1 = WaveSurfer.create({ container: '#mexp_noisy_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  130. mexp_noisy_src_waveform2_1.load('./audios/mexpresso_eng_spa/noisy/ref/s07_default_00066.wav'); </script>
  131. </th>
  132. <th>
  133. <div id="mexp_noisy_pretssel_waveform2_1"></div>
  134. <button id="written_source__header" class="play-button-demo btn btn-primary"
  135. onclick="mexp_noisy_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  136. </button>
  137. <script> var mexp_noisy_pretssel_waveform2_1 = WaveSurfer.create({ container: '#mexp_noisy_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  138. mexp_noisy_pretssel_waveform2_1.load('./audios/mexpresso_eng_spa/noisy/pretssel/s07_default_00066.wav'); </script>
  139. </th>
  140. <th>
  141. <div id="mexp_noisy_pretssel_denoiser_waveform2_1"></div>
  142. <button id="written_source__header" class="play-button-demo btn btn-primary"
  143. onclick="mexp_noisy_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  144. </button>
  145. <script> var mexp_noisy_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#mexp_noisy_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  146. mexp_noisy_pretssel_denoiser_waveform2_1.load('./audios/mexpresso_eng_spa/noisy/pretssel+denoiser/s07_default_00066.wav'); </script>
  147. </th>
  148. <th>
  149. <div id="mexp_noisy_dinopretssel_waveform2_1"></div>
  150. <button id="written_source__header" class="play-button-demo btn btn-primary"
  151. onclick="mexp_noisy_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  152. </button>
  153. <script> var mexp_noisy_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#mexp_noisy_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  154. mexp_noisy_dinopretssel_waveform2_1.load('./audios/mexpresso_eng_spa/noisy/dinopretssel/s07_default_00066.wav'); </script>
  155. </th>
  156. </tr>
  157. <tr>
  158. <th colspan="5" style="text-align:left">Sample 2</th>
  159. </tr>
  160. <tr>
  161. <th>Clean environment</th>
  162. <th>
  163. <div id="mexp_clean_src_waveform2_3"></div>
  164. <button id="written_source__header" class="play-button-demo btn btn-primary"
  165. onclick="mexp_clean_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  166. </button>
  167. <script> var mexp_clean_src_waveform2_3 = WaveSurfer.create({ container: '#mexp_clean_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  168. mexp_clean_src_waveform2_3.load('./audios/mexpresso_eng_spa/clean/ref/s08_default_00020.wav'); </script>
  169. </th>
  170. <th>
  171. <div id="mexp_clean_pretssel_waveform2_3"></div>
  172. <button id="written_source__header" class="play-button-demo btn btn-primary"
  173. onclick="mexp_clean_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  174. </button>
  175. <script> var mexp_clean_pretssel_waveform2_3 = WaveSurfer.create({ container: '#mexp_clean_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  176. mexp_clean_pretssel_waveform2_3.load('./audios/mexpresso_eng_spa/clean/pretssel/s08_default_00020.wav'); </script>
  177. </th>
  178. <th>
  179. <div id="mexp_clean_pretssel_denoiser_waveform2_3"></div>
  180. <button id="written_source__header" class="play-button-demo btn btn-primary"
  181. onclick="mexp_clean_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  182. </button>
  183. <script> var mexp_clean_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#mexp_clean_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  184. mexp_clean_pretssel_denoiser_waveform2_3.load('./audios/mexpresso_eng_spa/clean/pretssel+denoiser/s08_default_00020.wav'); </script>
  185. </th>
  186. <th>
  187. <div id="mexp_clean_dinopretssel_waveform2_3"></div>
  188. <button id="written_source__header" class="play-button-demo btn btn-primary"
  189. onclick="mexp_clean_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  190. </button>
  191. <script> var mexp_clean_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#mexp_clean_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  192. mexp_clean_dinopretssel_waveform2_3.load('./audios/mexpresso_eng_spa/clean/dinopretssel/s08_default_00020.wav'); </script>
  193. </th>
  194. </tr>
  195. <tr>
  196. <th>Noisy environment</th>
  197. <th>
  198. <div id="mexp_noisy_src_waveform2_3"></div>
  199. <button id="written_source__header" class="play-button-demo btn btn-primary"
  200. onclick="mexp_noisy_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  201. </button>
  202. <script> var mexp_noisy_src_waveform2_3 = WaveSurfer.create({ container: '#mexp_noisy_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  203. mexp_noisy_src_waveform2_3.load('./audios/mexpresso_eng_spa/noisy/ref/s08_default_00020.wav'); </script>
  204. </th>
  205. <th>
  206. <div id="mexp_noisy_pretssel_waveform2_3"></div>
  207. <button id="written_source__header" class="play-button-demo btn btn-primary"
  208. onclick="mexp_noisy_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  209. </button>
  210. <script> var mexp_noisy_pretssel_waveform2_3 = WaveSurfer.create({ container: '#mexp_noisy_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  211. mexp_noisy_pretssel_waveform2_3.load('./audios/mexpresso_eng_spa/noisy/pretssel/s08_default_00020.wav'); </script>
  212. </th>
  213. <th>
  214. <div id="mexp_noisy_pretssel_denoiser_waveform2_3"></div>
  215. <button id="written_source__header" class="play-button-demo btn btn-primary"
  216. onclick="mexp_noisy_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  217. </button>
  218. <script> var mexp_noisy_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#mexp_noisy_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  219. mexp_noisy_pretssel_denoiser_waveform2_3.load('./audios/mexpresso_eng_spa/noisy/pretssel+denoiser/s08_default_00020.wav'); </script>
  220. </th>
  221. <th>
  222. <div id="mexp_noisy_dinopretssel_waveform2_3"></div>
  223. <button id="written_source__header" class="play-button-demo btn btn-primary"
  224. onclick="mexp_noisy_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  225. </button>
  226. <script> var mexp_noisy_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#mexp_noisy_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  227. mexp_noisy_dinopretssel_waveform2_3.load('./audios/mexpresso_eng_spa/noisy/dinopretssel/s08_default_00020.wav'); </script>
  228. </th>
  229. </tr>
  230. </table>
  231. <br><hr>
  232. <div id="spa-eng-mdral" class="content-subtitle">mDRAL Spanish-to-English [1]
  233. </div>
  234. <table border="0" class="inlineTable">
  235. <tr>
  236. <th></th>
  237. <th>Source</th>
  238. <th style="color:blue">PRETSSEL (conventional)</th>
  239. <th>PRETSSEL + Denoiser</th>
  240. <th style="color:red">DINO-PRETSSEL (proposed)</th>
  241. </tr>
  242. <tr>
  243. <th colspan="5" style="text-align:left">Sample 1</th>
  244. </tr>
  245. <tr>
  246. <th>Clean environment</th>
  247. <th>
  248. <div id="mdral_clean_src_waveform2_1"></div>
  249. <button id="written_source__header" class="play-button-demo btn btn-primary"
  250. onclick="mdral_clean_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  251. </button>
  252. <script> var mdral_clean_src_waveform2_1 = WaveSurfer.create({ container: '#mdral_clean_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  253. mdral_clean_src_waveform2_1.load('./audios/mdral_spa_eng/clean/ref/005_%234.wav'); </script>
  254. </th>
  255. <th>
  256. <div id="mdral_clean_pretssel_waveform2_1"></div>
  257. <button id="written_source__header" class="play-button-demo btn btn-primary"
  258. onclick="mdral_clean_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  259. </button>
  260. <script> var mdral_clean_pretssel_waveform2_1 = WaveSurfer.create({ container: '#mdral_clean_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  261. mdral_clean_pretssel_waveform2_1.load('./audios/mdral_spa_eng/clean/pretssel/005_%234.wav'); </script>
  262. </th>
  263. <th>
  264. <div id="mdral_clean_pretssel_denoiser_waveform2_1"></div>
  265. <button id="written_source__header" class="play-button-demo btn btn-primary"
  266. onclick="mdral_clean_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  267. </button>
  268. <script> var mdral_clean_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#mdral_clean_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  269. mdral_clean_pretssel_denoiser_waveform2_1.load('./audios/mdral_spa_eng/clean/pretssel+denoiser/005_%234.wav'); </script>
  270. </th>
  271. <th>
  272. <div id="mdral_clean_dinopretssel_waveform2_1"></div>
  273. <button id="written_source__header" class="play-button-demo btn btn-primary"
  274. onclick="mdral_clean_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  275. </button>
  276. <script> var mdral_clean_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#mdral_clean_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  277. mdral_clean_dinopretssel_waveform2_1.load('./audios/mdral_spa_eng/clean/dinopretssel/005_%234.wav'); </script>
  278. </th>
  279. </tr>
  280. <tr>
  281. <th>Noisy environment</th>
  282. <th>
  283. <div id="mdral_noisy_src_waveform2_1"></div>
  284. <button id="written_source__header" class="play-button-demo btn btn-primary"
  285. onclick="mdral_noisy_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  286. </button>
  287. <script> var mdral_noisy_src_waveform2_1 = WaveSurfer.create({ container: '#mdral_noisy_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  288. mdral_noisy_src_waveform2_1.load('./audios/mdral_spa_eng/noisy/ref/005_%234.wav'); </script>
  289. </th>
  290. <th>
  291. <div id="mdral_noisy_pretssel_waveform2_1"></div>
  292. <button id="written_source__header" class="play-button-demo btn btn-primary"
  293. onclick="mdral_noisy_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  294. </button>
  295. <script> var mdral_noisy_pretssel_waveform2_1 = WaveSurfer.create({ container: '#mdral_noisy_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  296. mdral_noisy_pretssel_waveform2_1.load('./audios/mdral_spa_eng/noisy/pretssel/005_%234.wav'); </script>
  297. </th>
  298. <th>
  299. <div id="mdral_noisy_pretssel_denoiser_waveform2_1"></div>
  300. <button id="written_source__header" class="play-button-demo btn btn-primary"
  301. onclick="mdral_noisy_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  302. </button>
  303. <script> var mdral_noisy_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#mdral_noisy_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  304. mdral_noisy_pretssel_denoiser_waveform2_1.load('./audios/mdral_spa_eng/noisy/pretssel+denoiser/005_%234.wav'); </script>
  305. </th>
  306. <th>
  307. <div id="mdral_noisy_dinopretssel_waveform2_1"></div>
  308. <button id="written_source__header" class="play-button-demo btn btn-primary"
  309. onclick="mdral_noisy_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  310. </button>
  311. <script> var mdral_noisy_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#mdral_noisy_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  312. mdral_noisy_dinopretssel_waveform2_1.load('./audios/mdral_spa_eng/noisy/dinopretssel/005_%234.wav'); </script>
  313. </th>
  314. </tr>
  315. <tr>
  316. <th colspan="5" style="text-align:left">Sample 2</th>
  317. </tr>
  318. <tr>
  319. <th>Clean environment</th>
  320. <th>
  321. <div id="mdral_clean_src_waveform2_3"></div>
  322. <button id="written_source__header" class="play-button-demo btn btn-primary"
  323. onclick="mdral_clean_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  324. </button>
  325. <script> var mdral_clean_src_waveform2_3 = WaveSurfer.create({ container: '#mdral_clean_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  326. mdral_clean_src_waveform2_3.load('./audios/mdral_spa_eng/clean/ref/022_%2341.wav'); </script>
  327. </th>
  328. <th>
  329. <div id="mdral_clean_pretssel_waveform2_3"></div>
  330. <button id="written_source__header" class="play-button-demo btn btn-primary"
  331. onclick="mdral_clean_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  332. </button>
  333. <script> var mdral_clean_pretssel_waveform2_3 = WaveSurfer.create({ container: '#mdral_clean_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  334. mdral_clean_pretssel_waveform2_3.load('./audios/mdral_spa_eng/clean/pretssel/022_%2341.wav'); </script>
  335. </th>
  336. <th>
  337. <div id="mdral_clean_pretssel_denoiser_waveform2_3"></div>
  338. <button id="written_source__header" class="play-button-demo btn btn-primary"
  339. onclick="mdral_clean_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  340. </button>
  341. <script> var mdral_clean_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#mdral_clean_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  342. mdral_clean_pretssel_denoiser_waveform2_3.load('./audios/mdral_spa_eng/clean/pretssel+denoiser/022_%2341.wav'); </script>
  343. </th>
  344. <th>
  345. <div id="mdral_clean_dinopretssel_waveform2_3"></div>
  346. <button id="written_source__header" class="play-button-demo btn btn-primary"
  347. onclick="mdral_clean_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  348. </button>
  349. <script> var mdral_clean_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#mdral_clean_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  350. mdral_clean_dinopretssel_waveform2_3.load('./audios/mdral_spa_eng/clean/dinopretssel/022_%2341.wav'); </script>
  351. </th>
  352. </tr>
  353. <tr>
  354. <th>Noisy environment</th>
  355. <th>
  356. <div id="mdral_noisy_src_waveform2_3"></div>
  357. <button id="written_source__header" class="play-button-demo btn btn-primary"
  358. onclick="mdral_noisy_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  359. </button>
  360. <script> var mdral_noisy_src_waveform2_3 = WaveSurfer.create({ container: '#mdral_noisy_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  361. mdral_noisy_src_waveform2_3.load('./audios/mdral_spa_eng/noisy/ref/022_%2341.wav'); </script>
  362. </th>
  363. <th>
  364. <div id="mdral_noisy_pretssel_waveform2_3"></div>
  365. <button id="written_source__header" class="play-button-demo btn btn-primary"
  366. onclick="mdral_noisy_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  367. </button>
  368. <script> var mdral_noisy_pretssel_waveform2_3 = WaveSurfer.create({ container: '#mdral_noisy_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  369. mdral_noisy_pretssel_waveform2_3.load('./audios/mdral_spa_eng/noisy/pretssel/022_%2341.wav'); </script>
  370. </th>
  371. <th>
  372. <div id="mdral_noisy_pretssel_denoiser_waveform2_3"></div>
  373. <button id="written_source__header" class="play-button-demo btn btn-primary"
  374. onclick="mdral_noisy_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  375. </button>
  376. <script> var mdral_noisy_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#mdral_noisy_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  377. mdral_noisy_pretssel_denoiser_waveform2_3.load('./audios/mdral_spa_eng/noisy/pretssel+denoiser/022_%2341.wav'); </script>
  378. </th>
  379. <th>
  380. <div id="mdral_noisy_dinopretssel_waveform2_3"></div>
  381. <button id="written_source__header" class="play-button-demo btn btn-primary"
  382. onclick="mdral_noisy_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  383. </button>
  384. <script> var mdral_noisy_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#mdral_noisy_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  385. mdral_noisy_dinopretssel_waveform2_3.load('./audios/mdral_spa_eng/noisy/dinopretssel/022_%2341.wav'); </script>
  386. </th>
  387. </tr>
  388. </table>
  389. <br>
  390. </div>
  391. <div id="authors_data" class="content-container">
  392. <script src="wavesurfer.js"></script>
  393. <div class="content-title">
  394. <font size="+5">S2ST using Authors' Speech</font>
  395. </div>
  396. <hr>
  397. <div id="eng-spa-author" class="content-subtitle">English-to-Spanish
  398. </div>
  399. <table border="0" class="inlineTable">
  400. <tr>
  401. <th></th>
  402. <th>Source</th>
  403. <th style="color:blue">PRETSSEL (conventional)</th>
  404. <th>PRETSSEL + Denoiser</th>
  405. <th style="color:red">DINO-PRETSSEL (proposed)</th>
  406. </tr>
  407. <tr>
  408. <th colspan="5" style="text-align:left">Sample 1</th>
  409. </tr>
  410. <tr>
  411. <th>Clean environment</th>
  412. <th>
  413. <div id="clean_src_waveform2_1"></div>
  414. <button id="written_source__header" class="play-button-demo btn btn-primary"
  415. onclick="clean_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  416. </button>
  417. <script> var clean_src_waveform2_1 = WaveSurfer.create({ container: '#clean_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  418. clean_src_waveform2_1.load('./audios/employee_eng_spa/ref/clean_spk1_default_00240.wav'); </script>
  419. </th>
  420. <th>
  421. <div id="clean_pretssel_waveform2_1"></div>
  422. <button id="written_source__header" class="play-button-demo btn btn-primary"
  423. onclick="clean_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  424. </button>
  425. <script> var clean_pretssel_waveform2_1 = WaveSurfer.create({ container: '#clean_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  426. clean_pretssel_waveform2_1.load('./audios/employee_eng_spa/pretssel/clean_spk1_default_00240_pred.wav'); </script>
  427. </th>
  428. <th>
  429. <div id="clean_pretssel_denoiser_waveform2_1"></div>
  430. <button id="written_source__header" class="play-button-demo btn btn-primary"
  431. onclick="clean_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  432. </button>
  433. <script> var clean_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#clean_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  434. clean_pretssel_denoiser_waveform2_1.load('./audios/employee_eng_spa/pretssel+denoiser/clean_spk1_default_00240_pred.wav'); </script>
  435. </th>
  436. <th>
  437. <div id="clean_dinopretssel_waveform2_1"></div>
  438. <button id="written_source__header" class="play-button-demo btn btn-primary"
  439. onclick="clean_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  440. </button>
  441. <script> var clean_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#clean_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  442. clean_dinopretssel_waveform2_1.load('./audios/employee_eng_spa/dinopretssel/clean_spk1_default_00240_pred.wav'); </script>
  443. </th>
  444. </tr>
  445. <tr>
  446. <th>Noisy environment</th>
  447. <th>
  448. <div id="noisy_src_waveform2_1"></div>
  449. <button id="written_source__header" class="play-button-demo btn btn-primary"
  450. onclick="noisy_src_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  451. </button>
  452. <script> var noisy_src_waveform2_1 = WaveSurfer.create({ container: '#noisy_src_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  453. noisy_src_waveform2_1.load('./audios/employee_eng_spa/ref/noisy_spk1_default_00240.wav'); </script>
  454. </th>
  455. <th>
  456. <div id="noisy_pretssel_waveform2_1"></div>
  457. <button id="written_source__header" class="play-button-demo btn btn-primary"
  458. onclick="noisy_pretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  459. </button>
  460. <script> var noisy_pretssel_waveform2_1 = WaveSurfer.create({ container: '#noisy_pretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  461. noisy_pretssel_waveform2_1.load('./audios/employee_eng_spa/pretssel/noisy_spk1_default_00240_pred.wav'); </script>
  462. </th>
  463. <th>
  464. <div id="noisy_pretssel_denoiser_waveform2_1"></div>
  465. <button id="written_source__header" class="play-button-demo btn btn-primary"
  466. onclick="noisy_pretssel_denoiser_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  467. </button>
  468. <script> var noisy_pretssel_denoiser_waveform2_1 = WaveSurfer.create({ container: '#noisy_pretssel_denoiser_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  469. noisy_pretssel_denoiser_waveform2_1.load('./audios/employee_eng_spa/pretssel+denoiser/noisy_spk1_default_00240_pred.wav'); </script>
  470. </th>
  471. <th>
  472. <div id="noisy_dinopretssel_waveform2_1"></div>
  473. <button id="written_source__header" class="play-button-demo btn btn-primary"
  474. onclick="noisy_dinopretssel_waveform2_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  475. </button>
  476. <script> var noisy_dinopretssel_waveform2_1 = WaveSurfer.create({ container: '#noisy_dinopretssel_waveform2_1', waveColor: 'violet', progressColor: 'purple' });
  477. noisy_dinopretssel_waveform2_1.load('./audios/employee_eng_spa/dinopretssel/noisy_spk1_default_00240_pred.wav'); </script>
  478. </th>
  479. </tr>
  480. <tr>
  481. <th colspan="5" style="text-align:left">Sample 2</th>
  482. </tr>
  483. <tr>
  484. <th>Clean environment</th>
  485. <th>
  486. <div id="clean_src_waveform2_3"></div>
  487. <button id="written_source__header" class="play-button-demo btn btn-primary"
  488. onclick="clean_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  489. </button>
  490. <script> var clean_src_waveform2_3 = WaveSurfer.create({ container: '#clean_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  491. clean_src_waveform2_3.load('./audios/employee_eng_spa/ref/clean_spk2_default_00026.wav'); </script>
  492. </th>
  493. <th>
  494. <div id="clean_pretssel_waveform2_3"></div>
  495. <button id="written_source__header" class="play-button-demo btn btn-primary"
  496. onclick="clean_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  497. </button>
  498. <script> var clean_pretssel_waveform2_3 = WaveSurfer.create({ container: '#clean_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  499. clean_pretssel_waveform2_3.load('./audios/employee_eng_spa/pretssel/clean_spk2_default_00026_pred.wav'); </script>
  500. </th>
  501. <th>
  502. <div id="clean_pretssel_denoiser_waveform2_3"></div>
  503. <button id="written_source__header" class="play-button-demo btn btn-primary"
  504. onclick="clean_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  505. </button>
  506. <script> var clean_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#clean_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  507. clean_pretssel_denoiser_waveform2_3.load('./audios/employee_eng_spa/pretssel+denoiser/clean_spk2_default_00026_pred.wav'); </script>
  508. </th>
  509. <th>
  510. <div id="clean_dinopretssel_waveform2_3"></div>
  511. <button id="written_source__header" class="play-button-demo btn btn-primary"
  512. onclick="clean_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  513. </button>
  514. <script> var clean_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#clean_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  515. clean_dinopretssel_waveform2_3.load('./audios/employee_eng_spa/dinopretssel/clean_spk2_default_00026_pred.wav'); </script>
  516. </th>
  517. </tr>
  518. <tr>
  519. <th>Noisy environment</th>
  520. <th>
  521. <div id="noisy_src_waveform2_3"></div>
  522. <button id="written_source__header" class="play-button-demo btn btn-primary"
  523. onclick="noisy_src_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  524. </button>
  525. <script> var noisy_src_waveform2_3 = WaveSurfer.create({ container: '#noisy_src_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  526. noisy_src_waveform2_3.load('./audios/employee_eng_spa/ref/noisy_spk2_default_00026.wav'); </script>
  527. </th>
  528. <th>
  529. <div id="noisy_pretssel_waveform2_3"></div>
  530. <button id="written_source__header" class="play-button-demo btn btn-primary"
  531. onclick="noisy_pretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  532. </button>
  533. <script> var noisy_pretssel_waveform2_3 = WaveSurfer.create({ container: '#noisy_pretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  534. noisy_pretssel_waveform2_3.load('./audios/employee_eng_spa/pretssel/noisy_spk2_default_00026_pred.wav'); </script>
  535. </th>
  536. <th>
  537. <div id="noisy_pretssel_denoiser_waveform2_3"></div>
  538. <button id="written_source__header" class="play-button-demo btn btn-primary"
  539. onclick="noisy_pretssel_denoiser_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  540. </button>
  541. <script> var noisy_pretssel_denoiser_waveform2_3 = WaveSurfer.create({ container: '#noisy_pretssel_denoiser_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  542. noisy_pretssel_denoiser_waveform2_3.load('./audios/employee_eng_spa/pretssel+denoiser/noisy_spk2_default_00026_pred.wav'); </script>
  543. </th>
  544. <th>
  545. <div id="noisy_dinopretssel_waveform2_3"></div>
  546. <button id="written_source__header" class="play-button-demo btn btn-primary"
  547. onclick="noisy_dinopretssel_waveform2_3.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  548. </button>
  549. <script> var noisy_dinopretssel_waveform2_3 = WaveSurfer.create({ container: '#noisy_dinopretssel_waveform2_3', waveColor: 'violet', progressColor: 'purple' });
  550. noisy_dinopretssel_waveform2_3.load('./audios/employee_eng_spa/dinopretssel/noisy_spk2_default_00026_pred.wav'); </script>
  551. </th>
  552. </tr>
  553. </table>
  554. <br><hr>
  555. <div id="spa-eng-author" class="content-subtitle">Spanish-to-English
  556. </div>
  557. <table border="0" class="inlineTable">
  558. <tr>
  559. <th></th>
  560. <th>Source</th>
  561. <th style="color:blue">PRETSSEL (conventional)</th>
  562. <th>PRETSSEL + Denoiser</th>
  563. <th style="color:red">DINO-PRETSSEL (proposed)</th>
  564. </tr>
  565. <tr>
  566. <th colspan="5" style="text-align:left">Sample 1</th>
  567. </tr>
  568. <tr>
  569. <th>Clean environment</th>
  570. <th>
  571. <div id="clean_src_waveform_1"></div>
  572. <button id="written_source__header" class="play-button-demo btn btn-primary"
  573. onclick="clean_src_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  574. </button>
  575. <script> var clean_src_waveform_1 = WaveSurfer.create({ container: '#clean_src_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  576. clean_src_waveform_1.load('./audios/employee_spa_eng/ref/clean_spk3_00032.wav'); </script>
  577. </th>
  578. <th>
  579. <div id="clean_pretssel_waveform_1"></div>
  580. <button id="written_source__header" class="play-button-demo btn btn-primary"
  581. onclick="clean_pretssel_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  582. </button>
  583. <script> var clean_pretssel_waveform_1 = WaveSurfer.create({ container: '#clean_pretssel_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  584. clean_pretssel_waveform_1.load('./audios/employee_spa_eng/pretssel/clean_spk3_00032_pred.wav'); </script>
  585. </th>
  586. <th>
  587. <div id="clean_pretssel_denoiser_waveform_1"></div>
  588. <button id="written_source__header" class="play-button-demo btn btn-primary"
  589. onclick="clean_pretssel_denoiser_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  590. </button>
  591. <script> var clean_pretssel_denoiser_waveform_1 = WaveSurfer.create({ container: '#clean_pretssel_denoiser_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  592. clean_pretssel_denoiser_waveform_1.load('./audios/employee_spa_eng/pretssel+denoiser/clean_spk3_00032_pred.wav'); </script>
  593. </th>
  594. <th>
  595. <div id="clean_dinopretssel_waveform_1"></div>
  596. <button id="written_source__header" class="play-button-demo btn btn-primary"
  597. onclick="clean_dinopretssel_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  598. </button>
  599. <script> var clean_dinopretssel_waveform_1 = WaveSurfer.create({ container: '#clean_dinopretssel_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  600. clean_dinopretssel_waveform_1.load('./audios/employee_spa_eng/dinopretssel/clean_spk3_00032_pred.wav'); </script>
  601. </th>
  602. </tr>
  603. <tr>
  604. <th>Noisy environment</th>
  605. <th>
  606. <div id="noisy_src_waveform_1"></div>
  607. <button id="written_source__header" class="play-button-demo btn btn-primary"
  608. onclick="noisy_src_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  609. </button>
  610. <script> var noisy_src_waveform_1 = WaveSurfer.create({ container: '#noisy_src_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  611. noisy_src_waveform_1.load('./audios/employee_spa_eng/ref/noisy_spk3_00032.wav'); </script>
  612. </th>
  613. <th>
  614. <div id="noisy_pretssel_waveform_1"></div>
  615. <button id="written_source__header" class="play-button-demo btn btn-primary"
  616. onclick="noisy_pretssel_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  617. </button>
  618. <script> var noisy_pretssel_waveform_1 = WaveSurfer.create({ container: '#noisy_pretssel_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  619. noisy_pretssel_waveform_1.load('./audios/employee_spa_eng/pretssel/noisy_spk3_00032_pred.wav'); </script>
  620. </th>
  621. <th>
  622. <div id="noisy_pretssel_denoiser_waveform_1"></div>
  623. <button id="written_source__header" class="play-button-demo btn btn-primary"
  624. onclick="noisy_pretssel_denoiser_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  625. </button>
  626. <script> var noisy_pretssel_denoiser_waveform_1 = WaveSurfer.create({ container: '#noisy_pretssel_denoiser_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  627. noisy_pretssel_denoiser_waveform_1.load('./audios/employee_spa_eng/pretssel+denoiser/noisy_spk3_00032_pred.wav'); </script>
  628. </th>
  629. <th>
  630. <div id="noisy_dinopretssel_waveform_1"></div>
  631. <button id="written_source__header" class="play-button-demo btn btn-primary"
  632. onclick="noisy_dinopretssel_waveform_1.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  633. </button>
  634. <script> var noisy_dinopretssel_waveform_1 = WaveSurfer.create({ container: '#noisy_dinopretssel_waveform_1', waveColor: 'violet', progressColor: 'purple' });
  635. noisy_dinopretssel_waveform_1.load('./audios/employee_spa_eng/dinopretssel/noisy_spk3_00032_pred.wav'); </script>
  636. </th>
  637. </tr>
  638. <tr>
  639. <th colspan="5" style="text-align:left">Sample 2</th>
  640. </tr>
  641. <tr>
  642. <th>Clean environment</th>
  643. <th>
  644. <div id="clean_src_waveform_2"></div>
  645. <button id="written_source__header" class="play-button-demo btn btn-primary"
  646. onclick="clean_src_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  647. </button>
  648. <script> var clean_src_waveform_2 = WaveSurfer.create({ container: '#clean_src_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  649. clean_src_waveform_2.load('./audios/employee_spa_eng/ref/clean_spk4_00003.wav'); </script>
  650. </th>
  651. <th>
  652. <div id="clean_pretssel_waveform_2"></div>
  653. <button id="written_source__header" class="play-button-demo btn btn-primary"
  654. onclick="clean_pretssel_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  655. </button>
  656. <script> var clean_pretssel_waveform_2 = WaveSurfer.create({ container: '#clean_pretssel_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  657. clean_pretssel_waveform_2.load('./audios/employee_spa_eng/pretssel/clean_spk4_00003_pred.wav'); </script>
  658. </th>
  659. <th>
  660. <div id="clean_pretssel_denoiser_waveform_2"></div>
  661. <button id="written_source__header" class="play-button-demo btn btn-primary"
  662. onclick="clean_pretssel_denoiser_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  663. </button>
  664. <script> var clean_pretssel_denoiser_waveform_2 = WaveSurfer.create({ container: '#clean_pretssel_denoiser_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  665. clean_pretssel_denoiser_waveform_2.load('./audios/employee_spa_eng/pretssel+denoiser/clean_spk4_00003_pred.wav'); </script>
  666. </th>
  667. <th>
  668. <div id="clean_dinopretssel_waveform_2"></div>
  669. <button id="written_source__header" class="play-button-demo btn btn-primary"
  670. onclick="clean_dinopretssel_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  671. </button>
  672. <script> var clean_dinopretssel_waveform_2 = WaveSurfer.create({ container: '#clean_dinopretssel_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  673. clean_dinopretssel_waveform_2.load('./audios/employee_spa_eng/dinopretssel/clean_spk4_00003_pred.wav'); </script>
  674. </th>
  675. </tr>
  676. <tr>
  677. <th>Noisy environment</th>
  678. <th>
  679. <div id="noisy_src_waveform_2"></div>
  680. <button id="written_source__header" class="play-button-demo btn btn-primary"
  681. onclick="noisy_src_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  682. </button>
  683. <script> var noisy_src_waveform_2 = WaveSurfer.create({ container: '#noisy_src_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  684. noisy_src_waveform_2.load('./audios/employee_spa_eng/ref/noisy_spk4_00003.wav'); </script>
  685. </th>
  686. <th>
  687. <div id="noisy_pretssel_waveform_2"></div>
  688. <button id="written_source__header" class="play-button-demo btn btn-primary"
  689. onclick="noisy_pretssel_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  690. </button>
  691. <script> var noisy_pretssel_waveform_2 = WaveSurfer.create({ container: '#noisy_pretssel_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  692. noisy_pretssel_waveform_2.load('./audios/employee_spa_eng/pretssel/noisy_spk4_00003_pred.wav'); </script>
  693. </th>
  694. <th>
  695. <div id="noisy_pretssel_denoiser_waveform_2"></div>
  696. <button id="written_source__header" class="play-button-demo btn btn-primary"
  697. onclick="noisy_pretssel_denoiser_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  698. </button>
  699. <script> var noisy_pretssel_denoiser_waveform_2 = WaveSurfer.create({ container: '#noisy_pretssel_denoiser_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  700. noisy_pretssel_denoiser_waveform_2.load('./audios/employee_spa_eng/pretssel+denoiser/noisy_spk4_00003_pred.wav'); </script>
  701. </th>
  702. <th>
  703. <div id="noisy_dinopretssel_waveform_2"></div>
  704. <button id="written_source__header" class="play-button-demo btn btn-primary"
  705. onclick="noisy_dinopretssel_waveform_2.playPause()"> <i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause
  706. </button>
  707. <script> var noisy_dinopretssel_waveform_2 = WaveSurfer.create({ container: '#noisy_dinopretssel_waveform_2', waveColor: 'violet', progressColor: 'purple' });
  708. noisy_dinopretssel_waveform_2.load('./audios/employee_spa_eng/dinopretssel/noisy_spk4_00003_pred.wav'); </script>
  709. </th>
  710. </tr>
  711. </table>
  712. </div>
  713. <div class="content-container">
  714. Template based on <a style="color:rgb(22, 38, 67)" href="https://speechbot.github.io/"> Textless NLP</a> and <a
  715. style="color:rgb(22, 38, 67)" href="https://daps.cs.princeton.edu/projects/HiFi-GAN/index.php"> HiFi-GAN</a>
  716. pages.
  717. </div>
  718. <div class="content-container">
  719. <th>References</th>
  720. <br>
  721. <th>[1] Seamless Communication, “Seamless: Multilingual Expressive and Streaming Speech Translation,” arXiv, 2023.</th>
  722. <br>
  723. <th>[2] Jörgen Valk and Tanel Alumäe, “VoxLingua107: a dataset for spoken language recognition,” In Proc. IEEE SLT Workshop, 2021.</th>
  724. <br>
  725. <th>[3] Szu-Wei Fu et al., "MetricGAN+: An Improved Version of MetricGAN for Speech Enhancement," arXiv, 2021.</th>
  726. </div>
  727. </body>
  728. </html>