2017-05-01 5 views
0

ウェブページからIBM Watson Text to Speech APIを使用しようとしています。 Webページには、ユーザーが読んでみたい文章や言葉を取り、フォームに「SPEAK!」というボタンがあります。フォーム入力を確定して読み込みます。私の問題は、すべてがスムーズに進行していることをコンソールで確認しているときに、私のオーディオファイルが見つからないことがわかります。Jade/Pugを使用してWebページで音声を出力するときに404エラーが発生する

App.js - これはapiに接続し、合成されたコードを "audioFiles/Output.ogg"に送信してアクセスできるコードです。

var input; 
app.get("/speech", function(req, res, next) { 
input = req.query.speech; 
const TextToSpeechV1 = require('watson-developer-cloud/text-to-speech/v1'); 
const fs = require('file-system'); 
if(input) { 
    var intentValNumber = input.length; 
} 
console.log(intentValNumber); 
if (intentValNumber > 0) { 
    const text_to_speech = new TextToSpeechV1({ 
     url: "URL is here", 
     username: 'UserName is here', 
     password: 'PassWord is here', 
     version_date: TextToSpeechV1.VERSION_DATE_2017_04_26 
    }); 
    var params = { 
     text: input, 
     voice: 'en-US_MichaelVoice', 
     accept: 'audio/ogg' 
    }; 
    console.log(input); 
    // Pipe the synthesized text to a file. 
    text_to_speech.synthesize(params).on('error', function(error) { 
    console.log('Error:', error); 
    }).pipe(fs.createWriteStream('audioFiles/output.ogg')); 
}; 
next(); 
}); 

speech.pug - ここでフォームと音声を実行する必要があります。

extends layout 

block content 
.main.container.row 
    .col-md-6.col-md-offset-3 
    h1.display-4.m-b-2 Magic Reading! 
    form(method="GET" action="/speech") 
     div.form-group 
     label(for='speech') Type something to be spoken: 
     input#speech.form-control(type='text', placeholder='Type something to be read' name='speech') 
     button.btn.btn-primary(type='submit') SPEAK! 
     audio(controls='', autoplay='') 
     source(src='../audioFiles/output.ogg', type='audio/ogg') 

具体的なエラー - 何かアドバイスを事前にhttp://localhost:3000/audioFiles/output.ogg

感謝をGET!また、誰かがエラーやコードに関する詳細情報を必要としているかどうかを教えてください。

EDIT - この私のディレクトリ構造の簡略版です...

Project 
    | 
    +-- audioFiles(folder) 
    | | 
    | + - output.ogg 
    | + - music.mp3 
    | 
    +-- public(folder) 
    |  | 
    |  + - images(folder) 
    |  + - stylesheets(folder) 
    |  
    +-- routes(folder) 
    | | 
    | +-- index.js 
    |  
    +-- views(folder) 
    | | 
    | +-- speech.pug 
    |  
    + -- app.js 
+0

サーバ上に 'audioFiles/output.ogg'が存在しますか?はいの場合は、静的コンテンツの読み込みに問題があります。 –

+0

@Mukesh Sharmaはい、サーバー上に存在します。静的コンテンツを読み込む際に問題が発生した場合、どうすれば修正できますか? – ItsMeRileyP

+0

cool。ディレクトリ構造を表示します。 'express.static'を使う必要があります –

答えて

0

はその後、http://localhost:3000/audioFiles/output.ogg404を与えるべきではありませんあなたのapp.js

app.use("/audioFiles", express.static(path.join(__dirname, "audioFiles")))

に次の行を追加します。エラー。

+0

よろしくお願いします!それは404エラーを取り除き、ページにオーディオを出しています!ちょうどもう1つの質問とこれは完全に別の方向にあなたを導くかもしれません...静的ファイルは、 "オンザフライ"またはリアルタイムで更新できますか?私は、入力が変更されたときに私のオーディオファイルを変更する必要があったという最新のコメント/返信のどこかで言及しました。静的ファイルにはこのような変更が可能ですか?申し訳ありませんが、これは私が元々質問していた質問を完全に変更する場合。 – ItsMeRileyP

+0

'static'はあいまいです。はい。基礎となるファイルが変更された場合、urlは最新のコンテンツを提供します。 –

+0

私はあなたが私に与えてくれたコードを試してきました。私のオーディオファイルが変更されると、サイトは新しいオーディオを提供していない、それは以前のオーディオファイルを提供している。私はサイトを離れて戻ったときだけ変化することに気づきます。私はそれがオーディオファイルが変わるとすぐに変更する必要があります。これどうやってするの?私の一部は、 "express.static"アプローチ以外の技術も必要と考えています... – ItsMeRileyP

関連する問題