add sound and deepl.com ref

index.html

@@ -91,10 +91,15 @@
             <br>
             <span style="color:blueviolet;">- Type a word and press ENTER</span>
 
-            <div class="paddingleft"><br><input id="searchinput" type="text" ></div>
+            <div class="paddingleft"><br><input id="searchinput" type="text" ><a id="MP3Play" href="#"><img src="sound.png" alt="play">
+            <audio id="wordMP3" src="https://dictionary.blob.core.chinacloudapi.cn/media/audio/tom/b5/a7/B5A79061B96D65F36C2B250AC8A448AD.mp3" ></audio>
+            </a></div>
 
+
+
+                <div id="resultDiv">
 
-                <div id="resultDiv"></div>
+                </div>
                 <br>
                 <span style="color:blueviolet;">- History of query:</span><a id="clearall" style="float:right;" href="#">remove all</a>
                 <ul id="wordlist">

index.js

@@ -8,7 +8,8 @@ let clearall = document.getElementById('clearall');
 let thequote = document.getElementById('thequote');
 let theauthor = document.getElementById('theauthor');
 
-
+let MP3Play = document.getElementById('MP3Play');
+let wordMP3 = document.getElementById('wordMP3');
 
 
 chrome.tabs.executeScript({
@@ -21,6 +22,13 @@ chrome.tabs.executeScript({
     }
 );
 
+
+MP3Play.addEventListener("click",function(element){
+      let player = document.getElementById("wordMP3");
+      player.play();
+
+});
+
 clearall.addEventListener("click",function(element){
 
         chrome.storage.local.set({'new': []},function(){
@@ -134,12 +142,20 @@ function translate(word) {
         var xhr = new XMLHttpRequest();
         xhr.responseType = "document";
         var url = "https://cn.bing.com/dict/search?q="+word;
+        var url_deepl = "https://www.deepl.com/translator#en/zh/"+word;
         xhr.open("GET", url, true);
         xhr.onreadystatechange = function() {
           if (xhr.readyState == 4) {
             //display data fetched from bing.
             resultDiv.innerHTML="";
             var ulfetched=xhr.response.querySelector("div.qdef ul");
+            var MP3fetched=xhr.response.querySelector("div.hd_tf a");
+            if (MP3fetched!=undefined && ulfetched!=null){
+                var k = MP3fetched.getAttribute('onmouseover');
+                var k1=k.substr(k.indexOf("https"),k.indexOf("mp3")-k.indexOf("https")+3);
+                wordMP3.src=k1;
+
+            }
             if(ulfetched==undefined || ulfetched==null){
                 ulfetched=document.createElement('ul');
             }
@@ -151,7 +167,16 @@ function translate(word) {
             more.target="_blank"
             let moreli = document.createElement('li');
             moreli.append(more);
+
+            let more_deepl = document.createElement('a');
+            more_deepl.innerHTML='more on deepl ...';
+            more_deepl.href=url_deepl;
+            more_deepl.target="_blank"
+            let moreli_deepl = document.createElement('li');
+            moreli_deepl.append(more_deepl);
+
             resultDiv.querySelector("ul").append(moreli);
+            resultDiv.querySelector("ul").append(moreli_deepl);
             //resultDiv.appendChild(more);
 
             searchinput.setSelectionRange(0, searchinput.value.length);