title: javascript Text to Speech arabic
body: <p>I'm trying to make <code>SpeechSynthesisUtterance</code> work for Arabic</p>
  
  <p>It's working fine for English</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var u1 = new SpeechSynthesisUtterance('Hello world!');
    u1.lang = 'en-US';
    u1.pitch = 20;
    u1.rate = 1;
    u1.voiceURI = 'native';
    u1.volume = 1000;
    speechSynthesis.speak(u1);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But when Arabic is used</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var u1 = new SpeechSynthesisUtterance('عربي');
    u1.lang = 'ar-AE';
    u1.pitch = 20;
    u1.rate = 1;
    u1.voiceURI = 'native';
    u1.volume = 1000;
    speechSynthesis.speak(u1);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any idea what I'm doing wrong?</p>