Firebase存储下载文件功能不起作用(JavaScript/Web应用程序) [英] Firebase storage download file functionality not working(Javascript / Web application)
问题描述
我想播放Firebase存储器中的音频. 以下是它的HTML代码:-
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-storage.js"></script>
<script src="sample.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
// Initialize Firebase
initialise();
var config = {
apiKey: "<>",
authDomain: "<>",
databaseURL: "<>",
projectId: "<>",
storageBucket: "<>",
messagingSenderId: "<>"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div>
<audio id="currentsongplayer" controls autoplay>
<!--<source src="horse.ogg" type="audio/ogg">-->
<source id="currentaudiosource" src="05 - Track 05.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
这是Javascript文件:-
function initialise()
{
alert("started");
alert(firebase.storage());
// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
alert("check-1");
// Create a storage reference from our storage service
var storageRef = storage.ref();
alert("check0");
//var pathReference= storage.refFromURL('my url obtained from file properties in firebase storage');
var pathReference = storageRef.child('/01.HAGE SUMMANE.mp3');
alert("check1");
// Get the download URL
pathReference.getDownloadURL().then(function(url) {
alert("check2");
var audio=document.getElementById("currentsongplayer");
var source=document.getElementById("currentaudiosource");
alert("downloaded");
source.src=url;
audio.load();
audio.play();
}).catch(function(error) {
alert("caught");
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/object-not-found':
alert(error.message);
// File doesn't exist
break;
case 'storage/unauthorized':
alert(error.message);
// User doesn't have permission to access the object
break;
case 'storage/canceled':
alert(error.message);
// User canceled the upload
break;
case 'storage/unknown':
alert(error.message);
// Unknown error occurred, inspect the server response
break;
}
});
}
在上面的javascript中，仅执行第一个警报(启动时会发出警报).此警报之后没有一个警报起作用.我已经通过Firebase存储多次查阅了该文档.我在这里不了解这个问题. /p>
我还上传了数据库的屏幕快照，以便在文件名或路径名错误的情况下更正我.
此测试Web应用程序的整个代码已作为html和javascript文件在上面提供.请仔细阅读.
非常感谢您的帮助.
在</body>关闭之前，您必须将<script>中的所有标签<script>移至主体中.
在哪里总是应该放置em，如果您分别调用每个firebase功能<script>(btw是缩短加载时间的正确做法)，则不应加载整个捆绑包 firebase .js (也要小心，因为您两次调用了它.)
结构应为:
-
各种单一功能的Firebase
<script> -
它们下面的
initialise() -
，并持续所有其他
<script>，例如jquery，bootstrap等.
I want to play the audio residing in the firebase storage. The following is the HTML Code for it:-
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase-storage.js"></script>
<script src="sample.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
// Initialize Firebase
initialise();
var config = {
apiKey: "<>",
authDomain: "<>",
databaseURL: "<>",
projectId: "<>",
storageBucket: "<>",
messagingSenderId: "<>"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div>
<audio id="currentsongplayer" controls autoplay>
<!--<source src="horse.ogg" type="audio/ogg">-->
<source id="currentaudiosource" src="05 - Track 05.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
This is the Javascript file:-
function initialise()
{
alert("started");
alert(firebase.storage());
// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();
alert("check-1");
// Create a storage reference from our storage service
var storageRef = storage.ref();
alert("check0");
//var pathReference= storage.refFromURL('my url obtained from file properties in firebase storage');
var pathReference = storageRef.child('/01.HAGE SUMMANE.mp3');
alert("check1");
// Get the download URL
pathReference.getDownloadURL().then(function(url) {
alert("check2");
var audio=document.getElementById("currentsongplayer");
var source=document.getElementById("currentaudiosource");
alert("downloaded");
source.src=url;
audio.load();
audio.play();
}).catch(function(error) {
alert("caught");
// A full list of error codes is available at
// https://firebase.google.com/docs/storage/web/handle-errors
switch (error.code) {
case 'storage/object-not-found':
alert(error.message);
// File doesn't exist
break;
case 'storage/unauthorized':
alert(error.message);
// User doesn't have permission to access the object
break;
case 'storage/canceled':
alert(error.message);
// User canceled the upload
break;
case 'storage/unknown':
alert(error.message);
// Unknown error occurred, inspect the server response
break;
}
});
}
In the above javascript,only the first alert(which alerts as started) is executed.None of the alerts after this is working.I have referred the documentation by firebase storage many times.I am not understanding the issue here.
I have also uploaded the screenshot of the database so that you can correct me if I made mistake in the filename or pathname.
The entire code for this testing web application has been provided above as html and javascript files.Please look into it.
Thanks a lot for the help.
You have to move all the tags <script> in the body, at the end before </body> closes.
There is where you should always put em, also if you call each firebase functionality <script> separately (that btw is the right thing to do to improve loading times), you shouldn't load the entire bundle firebase.js (also be careful because you call it twice).
The structure should be like:
various single functionality firebase
<script>the
initialise()below themand last all other
<script>like jquery, bootstrap etc.
这篇关于Firebase存储下载文件功能不起作用(JavaScript/Web应用程序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
