Đặt nguồn phương tiện html5 bằng ajax

Question

Tôi cần hỗ trợ tiêu đề xác thực cho tệp âm thanh của tôi mà tôi đã lấy từ máy chủ bên ngoài. Vì vậy, bây giờ im cố gắng sử dụng ajax, tôi có thể lấy các tập tin tốt, nhưng tôi không thể đặt chúng như là nguồn phương tiện truyền thông cho máy nghe nhạc của tôi. Làm thế nào để bạn tiếp cận thiết lập một tập tin được tải ajax như một nguồn âm thanh?

EDIT

Đã kết thúc sửa chữa nó trong trường hợp có người trở lại theo cách này.

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(); 
}; 

Phải làm asynch: false, nếu không tôi sẽ nhận được một đoạn nhỏ của âm thanh thay vì tất cả. Mặc dù loại bỏ các asynch thực hiện gỡ lỗi dễ dàng hơn cuối cùng.

Answer 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(); 
}; 

Đã phải làm asynch: false, nếu không tôi sẽ nhận được một đoạn nhỏ của âm thanh thay vì tất cả của nó. Mặc dù loại bỏ các asynch thực hiện gỡ lỗi dễ dàng hơn cuối cùng.

Answer 2

Bạn có thực sự đang tải xuống tệp hay trả lại tệp ở định dạng được mã hóa base64 (tức là URI dữ liệu) không?

Thay đổi nguồn của phần tử âm thanh qua JavaScript khá đơn giản.

<audio id="myAudio" controls /> 

Và sau đó một khi bạn có nguồn ,:

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