HTML5音频事件监听器

TTS HTML5 Audio EventListener

本文关键字：监听器 事件 音频 HTML5      更新时间：2023-09-26

我的想法是创建一个JS动态播放任何文本作为使用谷歌"TTS Api"的音频文件。这是我的JS代码的一部分，我在Chrome中执行文件时得到的错误。不知何故，我不能访问一些音频对象在我的数组在for循环。

数组text_part包含我想要使用的文本。数组audioElementListe包含不同的音频对象。

我得到的错误:未捕获的类型错误:不能调用未定义的方法'play'

顺便说一句，英语不是我的母语，我是一个完全的js初学者;)

audioElementListe = new Array(3);
function start()
{
    text_part = new Array(3);
    text_part[0]='Hallo';
    text_part[1]='Florian';
    text_part[2]='Haha';
    for(var i = 0; i < text_part.length; i++)
    {   
        audioElementListe[i] = new Audio("");
    }
    for(var i = 0; i < text_part.length; i++)
    {   
            var help = 0;
            var url = "http://translate.google.com/translate_tts?tl=de&q="+text_part[i];
            audioElementListe[i] = new Audio("");
            document.body.appendChild(audioElementListe[i]);
            audioElementListe[i].src=url;
            audioElementListe[i].addEventListener('canPlay', function()                 
            {audioElementListe[i].play();}, false);
            //Error seems to be right here
            audioElementListe[i].addEventListener('ended', function()   
            {audioElementListe[i++].play();}, false);
    }
    audioElementListe[0].play();
}

编辑:通过不创建新的音频对象，但改变它的来源，做了一个"变通"。

<html>
<head>
</head>
<body>
<script type="text/javascript">
var audioElement;
var i;
function start()
{   
        i=0;
        text_part = new Array(3);
        text_part[0]='Hallo';
        text_part[1]='Florian';
        text_part[2]='Haha';
        var url = "http://translate.google.com/translate_tts?tl=de&q="+text_part[i];
        audioElement = new Audio("");
        document.body.appendChild(audioElement);
        audioElement.src=url;
        audioElement.addEventListener('canPlay', function() {audioElement.play();}, false);
        audioElement.addEventListener('ended', function()  
        {
                i++;
                if(i<text_part.length)
            {
                var url = "http://translate.google.com/translate_tts?tl=de&q="+text_part[i];
                audioElement.src=url;
                audioElement.addEventListener('canPlay', function() {audioElement.play();}, false);
                audioElement.play();
            }
;}, false);
        audioElement.play();
    }

我们需要将要读取的字符串分割为大多数相等长度的部分，并引入适当的js-statement setTimeOut(string, dt)

http://renatocappellani.altervista.org/blog/programmazione-dei-ritardi-in-javascript-settimeoutcomandotempo/

相关文章：