使用Jade/Pug在網頁上輸出音頻時出現404錯誤

我正嘗試通過網頁使用IBM Watson Text to Speech API。在網頁上，我有一個表格，用戶想要閱讀的句子或單詞以及「SPEAK！」按鈕。完成並讀取表單輸入。我的問題是，當我在控制檯中查看以確保一切順利時，我發現我的音頻文件未找到。使用Jade/Pug在網頁上輸出音頻時出現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

預先感謝任何建議！另外讓我知道是否有人需要更多關於錯誤或代碼的信息。

編輯 - 這是我的目錄結構的簡化版本...

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

來源

2017-05-01 ItsMeRileyP

服務器上是否存在'audioFiles/output.ogg'？如果是，那麼您在加載靜態內容時遇到了問題。 –

@Mukesh Sharma是的，它確實存在於服務器上。如果我在加載靜態內容時遇到問題，我該如何解決這個問題？ – ItsMeRileyP

很酷。顯示你的目錄結構。你必須使用'express.static' –

添加下面一行在你app.js

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

然後，http://localhost:3000/audioFiles/output.ogg不應該給404錯誤。

來源

2017-05-03 00:28:03

非常感謝！它確實消除了404錯誤，並且它正在發送頁面上的音頻！還有一個問題，這可能會導致你在另一個方向......靜態文件可以「即時」或實時更新嗎？我在最近的評論/回覆中提到，當輸入改變時，我的音頻文件需要更改。靜態文件是否能夠像這樣改變？對不起，如果這完全改變了我最初問的問題。 – ItsMeRileyP

'static'是模糊的術語。是的，如果底層文件發生變化，網址將提供最新內容。 –

我一直在嘗試你給我的代碼，它工作得很好，只是一個問題。當我的音頻文件發生變化時，該網站不會提供新的音頻，它正在服務之前的音頻文件。我注意到，只有當我離開網站並回來時它纔會發生變化。我需要它在音頻文件更改後立即更改。我怎樣才能做到這一點？我認爲，除了「express.static」方法之外，我還需要其他技術...... – ItsMeRileyP

使用Jade/Pug在網頁上輸出音頻時出現404錯誤

回答

相關問題