Bluemix：文本到语音的响应未使用以下代码播放音频

Question

你能帮我解决这个问题吗，为什么文本到语音的响应不是使用下面的代码播放音频？

index.jsp

$.fn.PlayBtnClicked = function() { 
    var txt=$(this).data("text"); 
    $.ajax({
      type: "GET",
      url: 'demo',async: false,
      data: { text: txt} ,
        success: function(response) { 
        $(".result").show();
            var audio = document.getElementById("myAudio"); 
            audio.src = response;
            audio.type = "type/ogg"; 
            audio.play();
        }
     });
 }; 

<audio id="myAudio" autoplay preload="auto" autobuffer controls class="audio"></audio>

DemoServlet.java

protected void doGet(final HttpServletRequest req,
            final HttpServletResponse resp) throws ServletException,
            IOException {
        String serviceName = "text_to_speech";

        // If running locally complete the variables below with the information
        // in VCAP_SERVICES
        String baseURL = "https://stream.watsonplatform.net/text-to-speech/api";
        String username = "USERNAME";
        String password = "PASSWORD";

        if (req.getParameter("text") == null) {
            req.getRequestDispatcher("/index.jsp").forward(req, resp);
        } else {
            boolean download = false;
            if (req.getParameter("download") != null
                    && req.getParameter("download").equalsIgnoreCase("true")) {
                download = true;
            } 
            req.setCharacterEncoding("UTF-8");
            try { 
                String  text=req.getParameter("text");
                text=URLEncoder.encode(text, "UTF-8");
                String voice="&voice=en-US_AllisonVoice";
                String queryStr=text+voice;
                String url = baseURL + "/v1/synthesize";
                if (queryStr != null) {
                    url += "?text=" + queryStr;
                }
                URI uri = new URI(url).normalize();

                Request newReq = Request.Get(uri);
                newReq.addHeader("Accept", "audio/ogg; codecs=opus");

                Executor executor = Executor.newInstance().auth(username,
                        password);
                Response response = executor.execute(newReq);
                if (download) {
                    resp.setHeader("content-disposition",
                            "attachment; filename=transcript.ogg");
                }
                ServletOutputStream servletOutputStream = resp
                        .getOutputStream();
                response.returnResponse().getEntity()
                        .writeTo(servletOutputStream);
                servletOutputStream.flush();
                servletOutputStream.close();
            } catch (Exception e) {
                // Log something and return an error message
                logger.log(Level.SEVERE, "got error: " + e.getMessage(), e);
                resp.setStatus(HttpStatus.SC_BAD_GATEWAY);
            }
        }
    }

此处 java 方法成功运行以响应它 returns 一些二进制类型的数据到 jsp ， ajax 响应。但我仍然无法播放音频。你能帮我解决这个问题吗？

Answer 1

问题是您正在为 <audio> 标签的 src 属性设置 html 响应。

您需要执行以下操作：

$.fn.PlayBtnClicked = function() { 
  var text = $(this).data("text"); 

  var audio = document.getElementById("myAudio");
  audio.setAttribute('src','/synthesize?text=' + encodeURIComponent(text));
});

更多信息

Bluemix：文本到语音的响应未使用以下代码播放音频

Bluemix: Response of Text-to-speech is not playing audio using below code

ibm-watson

ibm-cloud