单击我的网站中的图像时将文本转换为语音

Question

我试着在我的网站上做这个文本到语音的转换。

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

当我在nanogallery2中点击play(custom1)按钮时，我想让这个文本变成语音。

这段代码是nanogallery with pug (home.pug)

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 })

这个选项给我的nanogallery添加了一个按钮，当我点击这个按钮时，"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();
}

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

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

此外，当我尝试添加他们在视频中给出的脚本时，它会破坏纳米枪。

我不知道这是否相关。

谢谢

Answer 1

经过多次尝试..。失败的原因是没有将值​​输入到nanogallery。

"fnThumbnailToolCustAction"：SoundCustom，

至：

"fnThumbnailToolCustAction"："SoundCustom"，

希望其他人不会因此而倒下。?