質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1084閲覧

データベースから取得したファイル情報をもとにファイルを読み込む際のエラー

luuguas

総合スコア492

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/05/04 03:45

以下のようなウェブページを試験的に作っています。

  1. 音声ファイルをFile System Access APIを使って読み込み、ページ上に表示する
  2. その際、ファイル情報をデータベース(IndexedDB)に保存する
  3. ページを再度開いたときに、データベースから以前保存したファイル情報を取得し、ファイルを読み込んでページ上に表示する

しかし、3. でユーザーからファイル情報にアクセスするための許可が必要なのですが、許可を得ようとするとエラーが発生してしまいます。

コードのどの箇所が間違えているのか、どう直せば正常に動くか、ご教授お願い致します。

エラー内容

script.js:70 Uncaught (in promise) DOMException: User activation is required to request permissions.

コード

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <mata charset="UTF-8"></mata> 6 <title>音楽ファイルアップロードテスト</title> 7 <script type="text/javascript" src="jquery-3.6.0.min.js"></script> 8 <script type="text/javascript" src="script2.js"></script> 9</head> 10 11<body> 12 <input type="button" id="load" value="音声ファイルの読み込み..."> 13 <div id="container" style="display: flex; flex-direction: column;"></div> 14</body> 15 16</html>

javascript

1/* let deleteRequest = indexedDB.deleteDatabase('testDatabase'); 2deleteRequest.onerror = function (e) { 3 console.error('データベースの削除に失敗しました'); 4}; 5deleteRequest.onsuccess = function (e) { 6 console.log('データベースの削除に成功しました'); 7} */ 8 9const option = { 10 types: [ 11 { 12 description: 'MP3', 13 accept: { 14 'audio/mp3': '.mp3' 15 } 16 }, 17 ], 18 excludeAcceptAllOption: true, 19 multiple: true 20}; 21 22let database; 23const databaseName = 'testDatabase'; 24const storeName = 'fileHandles'; 25 26 27async function loadFileHandles() { 28 //データベースを取得 29 let openRequest = indexedDB.open(databaseName); 30 openRequest.onerror = function (e) { 31 console.error('データベースの取得に失敗しました'); 32 }; 33 openRequest.onupgradeneeded = function (e) { 34 console.info('データベースを新規作成しました'); 35 let newDatabase = e.target.result; 36 newDatabase.createObjectStore(storeName, { autoIncrement: true }); 37 }; 38 openRequest.onsuccess = function (e) { 39 console.log('データベースの取得に成功しました'); 40 database = e.target.result; 41 let trans = database.transaction(storeName, 'readwrite'); 42 let store = trans.objectStore(storeName); 43 //ファイル情報を取得 44 store.openCursor().onsuccess = async function (e) { 45 let cursor = e.target.result; 46 if (cursor) { 47 let fileHandle = cursor.value; 48 if (await fileHandle.requestPermission({ mode: 'read' }) === 'granted') { /* ここでエラーが発生します */ 49 let fileData = await fileHandle.getFile(); 50 let reader = new FileReader(); 51 reader.onload = (function () { 52 return function (e) { 53 let div = $('<div>').css({ margin: '5px', display: 'flex', flexDirection: 'column' }); 54 $(div).append($('<span>').text(fileData.name)); 55 $(div).append($('<audio>', { src: e.target.result, controls: true })); 56 $('#container').append(div); 57 } 58 })(fileData); 59 reader.readAsDataURL(fileData); 60 console.log('"' + fileHandle.name + '"をデータベースから読み込みました'); 61 } 62 else { 63 console.log('"' + fileHandle.name + '"の読み込みが拒否されました'); 64 } 65 cursor.continue(); 66 } 67 else { 68 console.log('データベースからの読み込みが完了しました'); 69 } 70 }; 71 }; 72} 73 74async function saveFileHandles(fileHandles) { 75 let trans = database.transaction(storeName, 'readwrite'); 76 let store = trans.objectStore(storeName); 77 $.each(fileHandles, function (idx, val) { 78 let addRequest = store.add(val); 79 addRequest.onerror = function () { 80 console.log('"' + val.name + '"の保存に失敗しました'); 81 } 82 addRequest.onsuccess = function () { 83 console.log('"' + val.name + '"をデータベースに保存しました'); 84 }; 85 }); 86} 87 88async function uploadAudios(e) { 89 //選択ダイアログを表示 90 let fileHandles = await window.showOpenFilePicker(option); 91 92 //ファイルを読み込んで表示 93 for (let file of fileHandles) { 94 let fileData = await file.getFile(); 95 let reader = new FileReader(); 96 reader.onload = (function () { 97 return function (e) { 98 let div = $('<div>').css({ margin: '5px', display: 'flex', flexDirection: 'column' }); 99 $(div).append($('<span>').text(fileData.name)); 100 $(div).append($('<audio>', { src: e.target.result, controls: true })); 101 $('#container').append(div); 102 } 103 })(fileData); 104 reader.readAsDataURL(fileData); 105 } 106 107 //ファイル情報をデータベースに保存 108 saveFileHandles(fileHandles); 109} 110 111document.addEventListener('DOMContentLoaded', function (e) { 112 loadFileHandles(); 113 $('#load').click(uploadAudios); 114});

試したこと

上記コードのif (await fileHandle.requestPermission(...の条件を外したところ、直後のlet fileData = await fileHandle.getFile();で、ファイルにアクセスする許可が得られていないというエラーが発生しました。

script.js:69 Uncaught (in promise) DOMException: The request is not allowed by the user agent or the platform in the current context.

さらにlet fileData = await file.getFile();~reader.readAsDataURL(fileData);を削除したところ、エラーは発生しませんでした。

実行環境

Windows 10 Home バージョン:21H1
Chrome バージョン:101.0.4951.54(Official Build)(最新の状態)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

javascript - FileSystemHandle.requestPermission DOMException: User activation is required to request permissions - Stack Overflow
によると、プログラム側が勝手に許可リクエストを送ることはできず、ユーザーからの操作(ボタンをクリックする等)があった場合のみリクエストを送ることが出来るようです。

そのため、新しく読み込み用のボタンを作成し、それをクリックしたときにイベントリスナーで許可リクエストを送るようにすることで解決しました。

ただし、ユーザーがボタンをクリックした瞬間から約5秒を超えた時点で許可リクエストを送ろうとすると、同様のエラーが発生するため、各ファイルの読み込みを非同期関数で行うことにより、時間内に全ての許可リクエストを送ることが出来ました。

投稿2022/05/05 04:50

編集2022/05/05 04:51
luuguas

総合スコア492

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問