简体   繁体   中英

Javascript `onerror` is not getting fired

Please have a look at the code below:

function longSentenceSpeak(text)
    {

        var url = "http://www.translate.google.com/translate_tts?tl=en&q="+finalString;
        var url2 = "http://www.translate.google.com/translate_tts?tl=sp&q="+finalString;

        var audio = document.getElementById('audio');

        var source = document.getElementById('source');
        source.src=url;

        audio.load(); //call this to just preload the audio without playing
        audio.play(); //call this to play the song right away

    audio.onerror = function()
    {
        var url2 = "http://translate.google.com/translate_tts?tl=en&q="+text;

        var audio = document.getElementById('audio');

        var source = document.getElementById('source');
        source.src = url2;

        audio.load(); //call this to just preload the audio without playing
        audio.play(); //call this to play the song right away
    };
    }

Below is my HTML:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="scripts/TTS.js"></script>
        <script>
           function longText()
           {
               longSentenceSpeak("hello world ");
           }
        </script>
    </head>
    <body>
        <audio id="audio">
            <source id="source" src="" type="audio/mp3" />
        </audio>

        <div><button onclick="longText()">Click me</button></div>
    </body>
</html>

However this gives this error, even though it should handle it:

Failed to load resource: the server responded with a status of 404 (Not Found) (12:49:15:455 | error, network)
at http‍://www.translate.google.com/translate_tts?tl=en&q=hello

What I want to do is, if this error occurred, I want to use var url2 instead of var url in function longSentenceSpeak(text) . How can I do this?

The error event doesn't bubble and in this case, it will fire on the <source> elements.
You thus need to listen to it from there:

 function longText() { var audio = document.getElementById('audio'); var source = document.getElementById('source'); source.src = '/foo.bar'; audio.load(); //call this to just preload the audio without playing audio.play(); //call this to play the song right away source.onerror = function() { console.log('handling error event'); }; }
 <audio id="audio"> <source id="source" src="" type="audio/mp3" /> </audio> <div><button onclick="longText()">Click me</button></div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM