Q&A
MacOS上で、Djangoを使って数秒程度の音声ファイルを再生するWebページを作っているのですが、ブラウザによって上手く再生できない場合があり、困っております。
Djangoのセッティングは「sound_test」というプロジェクトに「sound」というアプリケーションを作成しました。ソースツリーは以下の通りです。
sound_test
├ db.sqlite3
├ manage.py
├ sound
│ ├ _ init _.py
│ ├ admin.py
│ ├ apps.py
│ ├ migrations
│ │ init.py
│ ├ models.py
│ ├ static
│ │ js─
│ │ │ sounds.js
│ │ sound
│ │ output_00100.mp3
│ ├ templates
│ │ index.html
│ ├ tests.py
│ └ views.py
└ sound_test
├ _ init _.py
├ settings.py
├ urls.py
└ wsgi.py
以下に変更したソースを示します。
views.py
Python
1from django.shortcuts import render 2from django.views.generic import TemplateView 3 4# Create your views here. 5class IndexView(TemplateView): 6 def get(self, request): 7 context = {} 8 return render(request, 'index.html', context) 9 10index = IndexView.as_view()
url.py
Python
1from django.contrib import admin 2from django.urls import path 3import sound.views 4 5urlpatterns = [ 6 path('admin/', admin.site.urls), 7 path('', sound.views.index, name='index'), 8]
index.html
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>サウンド・テスト</title> 8</head> 9<body> 10 <a href="#" onclick="playSound()">音声1</a> 11 <audio src="/static/sound/output_00100.mp3" id="sound1"></audio> 12</body> 13<script> 14 function playSound(){ 15 document.getElementById('sound1').play() ; 16 } 17</script> 18</html>
settings.py (変更点のみ)
INSTALLED_APPS = [ ... 'sound', ]
この構成で、python3 manage.py runserver すると、MacOSのSafariおよびiOSのSafari, Chromeで次のような現象がでます。
-
最初にページを表示した直後(または再読み込みした直後)は、何度クリックしても最初の1度しか音がでない。
-
ブラウザを再描画(例えば、アイコン化して戻すなど)すると、1回目...音が出る、2回目...音が出ない、3回目...音が出る ..... というふうに交互に音が出たり出なかったりする。
ちなみに、
- MacOSのChrome
- MacOSのFireFox
- Windows10のIE11
- Windows10のEdge
- Windows10のChrome
では、正常に毎回クリックするたびに音が出ることを確認しました。
各ソフトウェアのバージョンです。
MacOS: 10.14.6
Python: 3.7.4 (venv上で動作)
Django: 2.2.5
iOS: 12.4
※ もし足りない情報などありましたら、ご指摘ください。
同じHTMLファイルをMacOS上のapacheで動かすと、MacOSのSafariでも問題なく毎回音が出るので、何かDjango絡みの問題ではないかと思うのですが、何かヒントになる情報や心当たりなどありますでしょうか？
教えていただけると幸甚です。よろしくお願いいたします。
あなたの回答
tips
プレビュー
