HTML5のAudioの初期化について教えてください。

初めましての投稿になります。

現在、audioとPHPを利用して音声ファイルのアップロード処理の作成を行っているのですが、
削除ボタンを押下してファイル削除を行い、次のファイルをアップした時に、
Audioのデータが前の情報のままとなってしまいます。

なお、保存後のファイル名については同一となります。
また、ファイル自体は削除されています。

Audio('file_path')を利用してjsでもやってみたのですが、同じでした。
初期化ができそうな気もしますが、調べても分かりませんでした。
教えて頂けますでしょうか。よろしくお願いします。

【流れ】
１、A.mp3(3分)をアップロード(ajax)（ファイル名は「12345.mp3という名前でサーバーに保存」）
２、画面に3分と表示される(<audio controls src="/file_path/12345.mp3"></audio>)
３、A.mp3を削除(ajax)('/file_path/'内からも削除確認済み)

４、B.mp3(10分)をアップロード(ajax)（ファイル名は「12345.mp3という名前でサーバーに保存」）
５、画面に3分と表示される(<audio controls src="/file_path/12345.mp3"></audio>)
６、'/file_path/'には新しいファイルB.mp3(10分)がアップされている

以下参考になるか分からないくらい省略してしまいましたが、ソースの内容になります。

html
1<audio controls src="">
2　Your browser does not support the
3  <code>audio</code> element.
4</audio>
5

js
1
2    let audio_file= localStorage.getItem('audio_file');
3    let is_updated = localStorage.getItem('is_updated ');
4
5    /*-----------------------------------------------"
6     初期表示
7    -----------------------------------------------*/
8    if(is_updated == 1){
9        $('audio').attr('src', audio_data);
10    }else{
11        audio_file = '';
12    }
13
14    /*-----------------------------------------------"
15     音声アップロード
16    -----------------------------------------------*/
17    $(document).on('click', 'upload-bt', function(){
18  
19        $.ajax({
20  　　　　　　/*- ajaxスタート -------------------*/
21        }).done(function(data, textStatus, jqXHR){
22            /*- 成功-------------------*/
23            if(data.result === true){
24                localStorage.setItem('is_updated', 1);
25                localStorage.setItem('audio_file', data.file_name);
26                $('#movie-to-audio-complete audio').attr('src', data.file_name);
27            }else{
28                /*- 失敗 -------------------*/
29            }
30        }).fail(function(jqXHR, textStatus, errorThrown){
31            /*- エラー -------------------*/
32        })
33        .always( (data) => {
34        });
35
36        return false;
37    });
38
39    /*-----------------------------------------------"
40     音声削除
41    -----------------------------------------------*/
42    $(document).on('click', '#delete-bt', function(){
43        $.ajax({
44            /*- ajaxスタート -------------------*/
45        }).done(function(data, textStatus, jqXHR){
46            if(data.result === true){
47                /*- 完了 -------------------*/
48                localStorage.setItem('is_updated', 0);
49                localStorage.removeItem('audio_file', data.file_name);
50            }else{
51                /*- 失敗 -------------------*/;
52            }
53        }).fail(function(jqXHR, textStatus, errorThrown){
54            /*- エラー -------------------*/
55        })
56        .always( (data) => {
57        });
58
59        return false;
60    });
61

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

回答1件

ベストアンサー

ちょっと

html
1<html>
2<head>
3<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
4</head>
5<body>
6<audio controls src="" id="movie-to-audio-complete">
7Your browser does not support the
8<code>audio</code> element.
9</audio>
10<br />
11<button id="upload-bt">再生</button>
12<br />
13<button id="delete-bt">停止</button>
14</body>
15<script>
16    /*-----------------------------------------------"
17     音声アップロード
18    -----------------------------------------------*/
19    $(document).on('click', '#upload-bt', function(){
20      $('#movie-to-audio-complete').attr('src', 'menuettm.mp3');
21    });
22
23    /*-----------------------------------------------"
24     音声削除
25    -----------------------------------------------*/
26    $(document).on('click', '#delete-bt', function(){
27        $('#movie-to-audio-complete').attr('src', 'menuettm.mp3');
28    });
29</script>
30</html>

でやってみたのですが再現できませんでした。

気になったことといえば、
$('#movie-to-audio-complete audio').attr('src', 'menuettm.mp3');
ではファイル読み込みされなくて
$('#movie-to-audio-complete').attr('src', 'menuettm.mp3');
ではファイル読み込めた

キャッシュかもしれないのでhogehoge.mp3?適当な値(URLパラメータ入れてキャッシュ聞かないようにする)でやってみるとかかなぁ。

投稿2020/05/25 08:14