使用ajax設置html5媒體源

我需要爲我從外部服務器抓取的音頻文件提供身份驗證標頭。所以，現在即時嘗試使用ajax，我可以抓住文件，但我不能將它們設置爲我的播放器的媒體源。你如何設置ajax加載文件作爲音頻源？使用ajax設置html5媒體源

編輯

端了它，以防有人固定回來這條路。

if (this.mAudioPlayer.canPlayType("audio/mpeg")) { 
    this.mExtension = '.mp3'; 
}else if (this.mAudioPlayer.canPlayType("audio/ogg")) { 
    this.mExtension = '.ogg'; 
} else if (this.mAudioPlayer.canPlayType("audio/mp4")) { 
    this.mExtension = '.m4a'; 
} 

this.CreateAudioData = function() { 

    //downloading audio for use in data:uri 
    $.ajax({ 
     url: aAudioSource + this.mExtension + '.txt', 
     type: 'GET', 
     context: this, 
     async: false, 
     beforeSend: function(xhr) {xhr.setRequestHeader('Authorization', window.userId);}, 
     success: this.EncodeAudioData, 
     error: function(xhr, aStatus, aError) { HandleError('Audio Error: ' + aStatus); } 
    }); 
}; 

this.EncodeAudioData = function(aData) { 
    //this.mAudioData = base64_encode(aData); 
    this.mAudioData = aData; 

    if (this.mExtension == '.m4a') { 
     Debug("playing m4a"); 
     this.mAudioSrc = "data:audio/mp4;base64," + this.mAudioData; 
    } else if (this.mExtension == '.ogg') { 
     Debug("playing ogg"); 
     this.mAudioSrc = "data:audio/ogg;base64," + this.mAudioData; 
    } else if (this.mExtension == '.mp3') { 
     Debug("playing mp3"); 
     this.mAudioSrc = "data:audio/mp3;base64," + this.mAudioData; 
    } 

}; 

this.play = function() { 

    if (this.mAudioPlayer.src != this.mAudioSrc) { 
     this.mAudioPlayer.src = this.mAudioSrc; 
    } 
    this.mAudioPlayer.load(); 
    this.mAudioPlayer.play(); 
};

必須做異步：假，否則我會得到一小塊音頻，而不是全部。儘管刪除異步程序使調試更容易。

來源

2012-09-17 Neablis

-1

if (this.mAudioPlayer.canPlayType("audio/mpeg")) { 
    this.mExtension = '.mp3'; 
}else if (this.mAudioPlayer.canPlayType("audio/ogg")) { 
    this.mExtension = '.ogg'; 
} else if (this.mAudioPlayer.canPlayType("audio/mp4")) { 
    this.mExtension = '.m4a'; 
} 

this.CreateAudioData = function() { 

//downloading audio for use in data:uri 
$.ajax({ 
    url: aAudioSource + this.mExtension + '.txt', 
    type: 'GET', 
    context: this, 
    async: false, 
    beforeSend: function(xhr) {xhr.setRequestHeader('Authorization', window.userId);}, 
    success: this.EncodeAudioData, 
    error: function(xhr, aStatus, aError) { HandleError('Audio Error: ' + aStatus); } 
    }); 
}; 

this.EncodeAudioData = function(aData) { 
    //this.mAudioData = base64_encode(aData); 
    this.mAudioData = aData; 

    if (this.mExtension == '.m4a') { 
    Debug("playing m4a"); 
    this.mAudioSrc = "data:audio/mp4;base64," + this.mAudioData; 
    } else if (this.mExtension == '.ogg') { 
    Debug("playing ogg"); 
    this.mAudioSrc = "data:audio/ogg;base64," + this.mAudioData; 
    } else if (this.mExtension == '.mp3') { 
    Debug("playing mp3"); 
    this.mAudioSrc = "data:audio/mp3;base64," + this.mAudioData; 
    } 

}; 

this.play = function() { 

    if (this.mAudioPlayer.src != this.mAudioSrc) { 
     this.mAudioPlayer.src = this.mAudioSrc; 
    } 
    this.mAudioPlayer.load(); 
    this.mAudioPlayer.play(); 
};

不得不做非同步：假的，否則我會得到的聲音，而不是它的所有的小塊。儘管刪除異步程序使調試更容易。

來源

2012-11-26 20:00:52 Neablis

你是真的下載文件，還是以base64編碼格式（即作爲Data URI）返回？

通過JavaScript更改音頻元素的來源非常簡單。

<audio id="myAudio" controls />

，然後一旦你有源,:

var audio = document.getElementById("myAudio"); 
audio.src = myAudioFile; 
audio.type = "type/ogg"; // ony showing an OGG example here

來源

2012-09-18 07:20:57

使用Ajax作爲base64編碼字符串加載它。我試圖編輯帖子。 – Neablis

我打算問這個問題，但那也應該是一樣的。 –

使用ajax設置html5媒體源

回答

相關問題