javascript - 单击我网站中的图像时文本到语音

Question

我尝试在我的网站中执行此文本转语音操作。

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

当我点击 nanogallery2 中的播放(自定义 1)按钮时，我希望此文本能够朗读。

这段带有 pug 的 nanogallery 代码 (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 })

此选项向我的纳米画廊添加一个按钮，当我单击该按钮时，“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

经过多次尝试..失败是因为将值输入到nangallery中。

“fnThumbnailToolCustAction”:SoundCustom，

致:

"fnThumbnailToolCustAction": "SoundCustom",

希望其他人不要踩到它。 👍