vue 对接有道文本翻译(生成单词语音)

1.先附上有道产品文档地址

https://ai.youdao.com/DOCSIRMA/html/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E7%BF%BB%E8%AF%91/API%E6%96%87%E6%A1%A3/%E6%96%87%E6%9C%AC%E7%BF%BB%E8%AF%91%E6%9C%8D%E5%8A%A1/%E6%96%87%E6%9C%AC%E7%BF%BB%E8%AF%91%E6%9C%8D%E5%8A%A1-API%E6%96%87%E6%A1%A3.html

链接地址右下方有  js demon，下面粘贴一份：

<!doctype html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>
<script type="text/javascript">
var appKey = '';
var key = '';//注意：暴露appSecret，有被盗用造成损失的风险
var salt = (new Date).getTime();
var curtime = Math.round(new Date().getTime()/1000);
var query = '您好，欢迎再次使用有道智云文本翻译API接口服务';
// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
var from = 'zh-CHS';
var to = 'en';
var str1 = appKey + truncate(query) + salt + curtime + key;
var vocabId =  '您的用户词表ID';
//console.log('---',str1);

var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
$.ajax({
    url: 'http://openapi.youdao.com/api',
    type: 'post',
    dataType: 'jsonp',
    data: {
        q: query,
        appKey: appKey,
        salt: salt,
        from: from,
        to: to,
        sign: sign,
        signType: "v3",
        curtime: curtime,
        vocabId: vocabId,
    },
    success: function (data) {
        console.log(data);
    } 
});

function truncate(q){
    var len = q.length;
    if(len<=20) return q;
    return q.substring(0, 10) + len + q.substring(len-10, len);
}
</script>
</body>

具体参数注释产品文档有详细介绍，这里就不多解释了，来看看还需准备什么  appKey  和 key

2.登录注册有道智云AI开放平台---->控制台---->创建应用，如下图

创建应用成功，先别着急用，需要再绑定语音合成功能，否则会报 110 错误，点击修改选取如下：

修改成功之后就可以用了，如下图：appKey=应用ID key = 应用秘钥 

 

 

 

但是！！！！提供的demon并不适合vue项目重复调用，需要封装，代码如下：

import $ from 'jquery'
import CryptoJS from './CryptoJS.js'

var appKey = '应用ID';
var key = '应用秘钥'; //注意：暴露appSecret，有被盗用造成损失的风险
var from = 'en';
var to = 'en';
var vocabId = ''; //您的用户词表ID

// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
function getMp3Url(query) {
    let salt = (new Date).getTime();
    let curtime = Math.round(new Date().getTime() / 1000);
    var str1 = appKey + truncate(query) + salt + curtime + key;
    var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
    return new Promise((resolve, reject) => {
        $.ajax({
            url: 'https://openapi.youdao.com/api',
            type: 'post',
            dataType: 'jsonp',
            data: {
                q: query,
                appKey: appKey,
                salt: salt,
                from: from,
                to: to,
                sign: sign,
                signType: "v3",
                curtime: curtime,
                vocabId: vocabId,
                voice: '0'
            },
            success: function(data) {
                resolve(data)
            },
            fail(err) {
                reject(err)
            }
        });
    })
}

function truncate(q) {
    var len = q.length;
    if (len <= 20) return q;
    return q.substring(0, 10) + len + q.substring(len - 10, len);
}

export default getMp3Url

使用方法：

全局挂载

 

import youdao from './assets/js/youdao.js'

app.config.globalProperties.$getMp3Url = youdao

 

页面使用：

 this.$getMp3Url('需要传入的单词').then((res) => {
            
 });

 

 

加密库CryptoJS.js文件下载地址：

链接: https://pan.baidu.com/s/1NH-IRCdywMEaMA5K8J87Tw 提取码: gtbp 复制这段内容后打开百度网盘手机App，操作更方便哦

posted @ 2021-07-31 10:04  待炒的鱼  阅读(1365)  评论(1)    收藏  举报