音声ファイルの名前を指定したい

JavaScriptだけでブラウザで録音＆ファイル保存する方法の、保存するファイルに名前をこちらで指定したいです。

HTML
1<html lang="ja">
2<head>
3	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
5</head>
6<body class="p-3">
7    <h1 class="mb-3">JavaScriptで録音するサンプル</h1>
8    <div id="app">
9        <button class="btn btn-danger" type="button" v-if="status=='ready'" @click="startRecording">録音を開始する</button>
10        <button class="btn btn-primary" type="button" v-if="status=='recording'" @click="stopRecording">録音を終了する</button>
11    </div>
12    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
13    <script>
14
15        new Vue({
16            el: '#app',
17            data: {
18                // ① 変数を宣言する部分
19                status: 'init',     // 状況
20                recorder: null,     // 音声にアクセスする "MediaRecorder" のインスタンス
21                audioData: [],      // 入力された音声データ
22                audioExtension: ''  // 音声ファイルの拡張子
23            },
24            methods: {
25                startRecording() {
26
27                    this.status = 'recording';
28                    this.audioData = [];
29                    this.recorder.start();
30
31                },
32                stopRecording() {
33
34                    this.recorder.stop();
35                    this.status = 'ready';
36
37                },
38                getExtension(audioType) {
39
40                    let extension = 'wav';
41                    const matches = audioType.match(/audio/([^;]+)/);
42
43                    if(matches) {
44
45                        extension = matches[1];
46
47                    }
48
49                    return '.'+ extension;
50
51                }
52            },
53            mounted() {
54
55                navigator.mediaDevices.getUserMedia({ audio: true })
56                    .then(stream => {
57
58                        this.recorder = new MediaRecorder(stream);
59                        this.recorder.addEventListener('dataavailable', e => {
60
61                            this.audioData.push(e.data);
62                            this.audioExtension = this.getExtension(e.data.type);
63
64                        });
65                        this.recorder.addEventListener('stop', () => {
66
67                            const audioBlob = new Blob(this.audioData);
68                            const url = URL.createObjectURL(audioBlob);
69                            let a = document.createElement('a');
70                            a.href = url;
71                            a.download = Math.floor(Date.now() / 1000) + this.audioExtension;
72                            document.body.appendChild(a);
73                            a.click();
74
75                        });
76                        this.status = 'ready';
77
78                    });
79
80            }
81        });
82
83    </script>
84</body>
85</html>
86
87

行動規範の内容に同意します

回答1件

保存するファイルの名前を指定するのはブラウザによって挙動が違うので、ライブラリを使用するのがおすすめです。

中でもFileSaver.jsというライブラリが人気なようです。

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

これでライブラリを読み込み、

audioBlobを生成したのち、

  FileSaver.saveAs(audioBlob, "sample.mp3");

でsample.mp3という名前で保存されるはずです。
詳細は公式サイト( https://github.com/eligrey/FileSaver.js/ )を参照してください。

投稿2020/08/16 10:35

Arahabica

総合スコア209

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

音声ファイルの名前を指定したい

関連した質問