gpt4 book ai didi

javascript - Firebase 存储下载文件功能不起作用(Javascript/Web 应用程序)

转载 作者:行者123 更新时间:2023-11-30 20:05:11 27 4
gpt4 key购买 nike

我想播放驻留在 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;
}
});
}

enter image description here

在上面的 javascript 中,只执行第一个警报(启动警报)。此后的警报均无效。我多次引用 firebase 存储的文档。我不理解这里的问题。

我也上传了数据库的截图,如果我的文件名或路径名有误,您可以指正。

此测试 Web 应用程序的完整代码已在上面作为 html 和 javascript 文件提供。请查看。

非常感谢您的帮助。

最佳答案

您必须移动所有标签 <script>正文中,最后在</body>之前关闭。

如果您调用每个 firebase 功能 <script>,您应该始终将 em 放在那里分开(顺便说一下,这是改善加载时间的正确做法),你不应该加载整个包 firebase.js(也要小心,因为你调用了它两次)。

结构应该是这样的:

  1. 各种单一功能的 Firebase <script>

  2. initialise()在他们下面

  3. 最后所有其他 <script>比如 jquery、bootstrap 等

关于javascript - Firebase 存储下载文件功能不起作用(Javascript/Web 应用程序),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53009267/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com