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

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

しかし、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）(最新の状態)

回答1件

自己解決

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

総合スコア464