2015-08-18 78 views
2

我在使用NodeJS中的mp3文件時遇到問題。在NodeJS中使用mp3文件以用於音頻標籤

var filestream = fs.createReadStream('file.mp3'); 
filestream.on('open', function() { 
    var stats = fs.statSync('file.mp3'); 
    var fileSizeInBytes = stats["size"]; 
    response.writeHead(200, { 
    'Content-Type': 'audio/mpeg', 
    'Content-Length': fileSizeInBytes}); 
    filestream.pipe(response); 
}); 

我正在設置文件的內容類型,然後它們的內容的長度。

當我在頁面上有文件時,我可以播放音頻並獲取內容的持續時間和當前時間。

但是我不能像當我不使用NodeJS服務mp3文件時那樣設置當前時間。

<audio id='player' src='file.mp3'></audio> 
<script> 
    var duration = player.duration; // 88 seconds 
    var time = player.currentTime; // 0 seconds 

    player.currentTime = 10; 

    var time = player.currentTime; // 0 seconds 
</script> 

只是爲了reitterate - 從目錄中打開該頁面時(不使用作爲的NodeJS服務器)我可以設置音頻元素的currentTime的。 這是爲什麼?
感謝您的幫助。

+1

看到這裏 - http://stackoverflow.com/a/9565178/766548 – levi

+0

謝謝萊維,這當然是問題所在。我會用特定於節點的代碼發佈答案。 – Sam

回答

0

解決方案是爲每個響應添加一個「Accept-Ranges」頭,並修改對帶有「range」頭的請求的響應,從頭中讀取字節範圍並使用HTTP/1.1 206響應代碼提供該內容。

該字節標題的格式爲bytes=<start>-<end>,例如, bytes=0-49

這是我更新的代碼:

var filestream = fs.createReadStream('file.mp3'); 
var range = request.headers.range.replace("bytes=", "").split('-'); 

filestream.on('open', function() { 
    var stats = fs.statSync('file.mp3'); 
    var fileSizeInBytes = stats["size"]; 

    // If the start or end of the range is empty, replace with 0 or filesize respectively 
    var bytes_start = range[0] ? parseInt(range[0], 10) : 0; 
    var bytes_end = range[1] ? parseInt(range[1], 10) : fileSizeInBytes; 

    var chunk_size = bytes_end - bytes_start; 

    if (chunk_size == fileSizeInBytes) { 
    // Serve the whole file as before 
    response.writeHead(200, { 
     "Accept-Ranges": "bytes", 
     'Content-Type': 'audio/mpeg', 
     'Content-Length': fileSizeInBytes}); 
    filestream.pipe(response); 
    } else { 
    // HTTP/1.1 206 is the partial content response code 
    response.writeHead(206, { 
     "Content-Range": "bytes " + bytes_start + "-" + bytes_end + "/" + fileSizeInBytes, 
     "Accept-Ranges": "bytes", 
     'Content-Type': 'audio/mpeg', 
     'Content-Length': fileSizeInBytes 
    }); 
    filestream.pipe(response.slice(bytes_start, bytes_end); 
    } 
}); 

此答案由GitHub上一個要點是部分靈感發現here

相關問題