如何实现双语歌词？

[WangWenBin2017]

emmm...虽然项目停止更新了,但是有没有会的有缘人帮忙实现一下呢qwq

[Peter1303]

我实现了https://pdev.top/music/#neteaseList

[WangWenBin2017]

我实现了https://pdev.top/music/#neteaseList

MD风，爱了爱了，希望继续开发下去，先star了🥰

[Toxiad]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

[WangWenBin2017]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

我觉得你可以把音效调节也加上，比如pc h5版b站播放器右键那个音效

[WorldlineChanger]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

请问大佬能提一下具体怎么改吗，没摸索出来···

[Toxiad]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

请问大佬能提一下具体怎么改吗，没摸索出来···

返回歌词的api有lyric和tlyric,tlyric就是翻译。
我是在ajax.js的ajaxLyric里接收tlyric，再把它的callback（lyric.js里的lyricCallback）加个接收tlyric的参数，在callback里判断是否有翻译，有翻译加个
追加

[WorldlineChanger]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

请问大佬能提一下具体怎么改吗，没摸索出来···

返回歌词的api有lyric和tlyric,tlyric就是翻译。
我是在ajax.js的ajaxLyric里接收tlyric，再把它的callback（lyric.js里的lyricCallback）加个接收tlyric的参数，在callback里判断是否有翻译，有翻译加个
追加

非常感谢，我去琢磨下
如果大佬有空能否建个仓库放个代码？JS这块属实小白，学了半天实现起来还是有困难，如果最终实现了的话我会注明你的id发博文的

[Toxiad]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´) 请问大佬能提一下具体怎么改吗，没摸索出来··· 返回歌词的api有lyric和tlyric,tlyric就是翻译。 我是在ajax.js的ajaxLyric里接收tlyric，再把它的callback（lyric.js里的lyricCallback）加个接收tlyric的参数，在callback里判断是否有翻译，有翻译加个 追加 非常感谢，我去琢磨下 如果大佬有空能否建个仓库放个代码？js这块属实小白，学了半天实现起来还是有困难，如果最终实现了的话我会注明你的id发博文的 — 过两天有空就发|ω・） 我也是萌新，不是啥大佬哈哈哈 You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[qingyun-studio]

其实实现这个东西并不很难，难就在看实现的思路。
一种最合理的解决办法就是获取tlyric，也就是翻译了的歌词。但是还有一种，就是借助翻译API
比如说比较有名的百度翻译，提供的是免费的API。

这里说一下思路：
申请百度翻译的API，然后修改lyric.js，给歌词加入translate属性，通过JS把带有translate属性的标签中的文字全部存在数组中，转换数组为“,”分割，并翻译，完成后重新拆分数组，显示即可。

本人的云音乐已经完美实现了这一个功能。如果不介意，可以和我交流一下，我乐意提供源代码参考！

[WangWenBin2017]

其实实现这个东西并不很难，难就在看实现的思路。
一种最合理的解决办法就是获取tlyric，也就是翻译了的歌词。但是还有一种，就是借助翻译API
比如说比较有名的百度翻译，提供的是免费的API。

这里说一下思路：
申请百度翻译的API，然后修改lyric.js，给歌词加入translate属性，通过JS把带有translate属性的标签中的文字全部存在数组中，转换数组为“,”分割，并翻译，完成后重新拆分数组，显示即可。

本人的云音乐已经完美实现了这一个功能。如果不介意，可以和我交流一下，我乐意提供源代码参考！

谢谢你，目前已经实现了...但是平台上大多数歌词是直接带有翻译的，而且如Toxiad所讲，api返回已经包含了歌词，而且翻译比机翻更加有人情味。所以问题主要是在用户端这边加上翻译的显示就行。但是有个问题是有些冷门歌曲没有人做过翻译，所以可以加个判断，平台方有翻译的直接调用平台方的，没有翻译的请求翻译api然后展示给用户。这样还可以减少对翻译api的调用，人工翻译的也比机器更加合适。

[Toxiad]

api返回是带有翻译的,在lyric.js的lyricCallback加上显示翻译就行(｀・ω・´)

请问大佬能提一下具体怎么改吗，没摸索出来···

返回歌词的api有lyric和tlyric,tlyric就是翻译。
我是在ajax.js的ajaxLyric里接收tlyric，再把它的callback（lyric.js里的lyricCallback）加个接收tlyric的参数，在callback里判断是否有翻译，有翻译加个
追加

非常感谢，我去琢磨下
如果大佬有空能否建个仓库放个代码？JS这块属实小白，学了半天实现起来还是有困难，如果最终实现了的话我会注明你的id发博文的

整忘了，鸽了这么久（
首先，播放器获取歌词的接口默认返回lyric和tlyric，tlyric就是翻译。

那么在歌词回调里把它显示出来就可以了。具体在ajax.js和lyric.js里
ajax.js

// ajax加载歌词
// 参数：音乐ID，回调函数
function ajaxLyric(music, callback) {
    lyricTip('歌词加载中...');

    if (!music.lyric_id) callback(''); // 没有歌词ID，直接返回

    $.ajax({
        type: mkPlayer.method,
        url: mkPlayer.api,
        data: "types=lyric&id=" + music.lyric_id + "&source=" + music.source,
        dataType: "jsonp",
        success: function(jsonData) {
            // 调试信息输出
            if (mkPlayer.debug) {
                console.debug("歌词获取成功");
            }
            if (jsonData.lyric) {
                rem.orgLyric = jsonData.lyric;
                if (jsonData.tlyric) {
                    rem.orgtLyric = jsonData.tlyric;
                    //修改处：将tlyric传递给callback
                    callback(jsonData.lyric, music.lyric_id, jsonData.tlyric); // 回调函数
                } else {
                    rem.orgtLyric = null;
                    callback(jsonData.lyric, music.lyric_id); // 回调函数
                }
            } else {
                rem.orgLyric = null;
                rem.orgtLyric = null;
                callback('', music.lyric_id); // 回调函数
            }
        }, //success
        error: function(XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('歌词读取失败 - ' + XMLHttpRequest.status);
                console.error(XMLHttpRequest + textStatus + errorThrown);
                callback('', music.lyric_id); // 回调函数
            } // error   
    }); //ajax
}

lyric.js

// 歌曲加载完后的回调函数
// 参数：歌词源文件
function lyricCallback(str, id, tstr) {
    if (id !== musicList[rem.playlist].item[rem.playid].id) {
        if (mkPlayer.debug) {
            console.debug("歌词id不符");
        }
        return; // 返回的歌词不是当前这首歌的，跳过
    }
    if (str === "") {
        lyricTip('暂时没有歌词');
        return false;
    }
    rem.lyric = parseLyric(str); // 解析获取到的歌词
       //修改处：解析歌词翻译
    rem.tlyric = parseLyric(tstr);


    lyricArea.html(''); // 清空歌词区域的内容
    lyricArea.scrollTop(0); // 滚动到顶部

    rem.lastLyric = -1;

    // 显示全部歌词
    var i = 0;
    for (var k in rem.lyric) {
        var txt = rem.lyric[k];
        if (!txt) txt = " ";
       //修改处：判断有无翻译，若有则加入翻译
        if (!rem.tlyric[k] || rem.tlyric[k] === '') {
            var li = $("<li data-no='" + i + "' class='lrc-item'><span class='shell'>" + txt + "</span></li>");
        } else {
            var li = $("<li data-no='" + i + "' class='lrc-item'><span class='shell'>" + txt + "<br><span class='trans-lyric'>" + rem.tlyric[k] + "</span></span></li>");
        }
        lyricArea.append(li);
        i++;
    }
}

当时改得十分简单粗暴，仅供参考

具体可以看这里

[jiyu3984]

新的问题，在添加翻译后，歌词的高亮还是一行一行的加，它甚至讲歌词翻译的也加入了高亮的，也就是，在有翻译时，高亮会将翻译看做本歌词

[jiyu3984]

其实实现这个东西并不难，难就在看实现的思路。 一种最合理的解决办法就是获取歌词，简单翻译了歌词。但是还有一种，就是借助翻译API 也就是说比较有名的百度翻译，提供免费的 API。

这里说一下思路： 申请百度翻译的API，然后修改lyric.js，给歌词添加翻译属性，通过JS把带有翻译属性的标签中的文字全部存在数据库中，转换数据库为“,”分割，并翻译，完成后重新拆分阵列，显示即可。

本人的云音乐已经完美实现了这一个功能。如果不介意，可以和我交流一下，我很乐意提供源码参考！

求个源码参考