javascript - 点击我网站上的图片时的文字转语音

我尝试在我的网站中进行文字朗读。

https://www.youtube.com/watch?v=DOtkNxmg9QY

当我单击nanogallery2中的play（custom1）按钮时，我希望此文本能语音显示。

帕格（home.pug）的nanogallery的此代码

script(type='text/javascript'src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
link(href='https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css' rel='stylesheet' type='text/css')
script(type='text/javascript' src='https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js')

#my_nanogallery2(data-nanogallery2=
{
    "items": categ,
    "itemsBaseURL": "/users/",
    "locationHash": false,
    "thumbnailWidth": "250",
    "thumbnailHeight": "250",
    "thumbnailBorderVertical": 4,
    "thumbnailBorderHorizontal": 4,
    "colorScheme":
    {
        "thumbnail":
        {
            "background": 'rgba(97, 152, 253, 1)',
            "thumbnailIcon" : { "color": '#FFF'}
        }
    },
    "thumbnailLabel":
    {
        "position": "onBottom",
        "titleFontSize": '1.5em'
    },
    "thumbnailAlignment": "center",
    "thumbnailDisplayTransitionDuration": 0,
    "thumbnailDisplayInterval": 3,
    "thumbnailHoverEffect2": null,
    "thumbnailToolbarImage":      { topLeft: 'custom1'},
    "thumbnailToolbarAlbum":      { topLeft: 'custom1'},
    "icons":                      { thumbnailCustomTool1 : '<i  class="fa fa-play-circle" style="font-size:24px"></i>'},
    "fnThumbnailToolCustAction":  SoundCustom,
    "thumbnailOpenImage": false })

此选项为我的纳诺画廊添加了一个按钮，当我单击该按钮时，“ soundcustom”功能应该起作用。

"thumbnailToolbarImage":      { topLeft: 'custom1'},
"thumbnailToolbarAlbum":      { topLeft: 'custom1'},
"icons":                      { thumbnailCustomTool1 : '<i  class="fa fa-play-circle" style="font-size:24px"></i>'},
"fnThumbnailToolCustAction":  SoundCustom,

这是home.js中的“ soundcustom”函数

 function SoundCustom(item){
    console.log(item.title);
    var text;
    text = encodeURIComponent(item.title);
    console.log(text);
    var url = "http://translate.google.com/translate_tts?tl=en&q=" + text + "&client=tw-ob";
    $('audio').attr('src', url).get(0).play();
}

我正在尝试放入控制台日志，以查看是否获得了该值。但是事实证明我什么也没得到。

当然，对按下按钮也没有任何反应。

另外，当我尝试添加脚本时，他们在视频中提供的脚本会破坏纳米画廊。

我不知道是否相关。

谢谢

最佳答案

经过多次尝试..失败的是将值输入到纳米画廊。

“ fnThumbnailToolCustAction”：SoundCustom，

至：

“ fnThumbnailToolCustAction”：“ SoundCustom”，

希望其他人不要落在它上面。 👍