GASのWebアプリケーションでローカルの音楽ファイルを再生

Question

前提・実現したいこと

以前はミュージックフォルダの音楽を再生するHTMLを作成し、ミュージックフォルダからローカル起動して使用していました。
今回そのHTMLをGASのWebアプリケーションに移植して、HTMLのローカル起動の問題を解消しようと思いました。

発生している問題・エラーメッセージ

エラーメッセージはありません。
パス名は正常に取得され表示もされるのですが音楽が再生されません。

該当のソースコード

言語　HTML、JavaScript

関連部分だけですが
<audio id="audio"></audio>　//オーディオタグを設定
<input type="file" webkitdirectory directory multiple onChange="ongfileListDirectory(this.files)" id="ongfilselct" style="display:none;"> //ongfileListDirectory()関数で配列ongrdmnam[]にフォルダ内のファイルパスを取得
<script type="text/javascript">
	var media = document.getElementById("audio"); //AudioObjectを作成
	     ｜
	media.src = ongrdmnam[]; //AudioObjectのsrcに配列のファイルパスを設定
	media.play();  //設定した音楽ファイルを再生
	     ｜
</script>

試したこと

全くわからずWeb検索でも全くヒットせず困っています。
以前もドキュメントにHTMLファイルを作成したときは同じような現象がありました。
それでHTMLファイルをミュージックフォルダに直接置いて解決した経緯があります。
（セキュリティーの関係のようですが）
今回はそれを解決したかったのですがうまくいきません。
（今回は前回と違いGASの問題と思いますが）
宜しくお願いします。

補足情報（FW/ツールのバージョンなど）

仕様ブラウザはChromeの最新バージョンです。

Comments

[papinianus]

できれば抜粋じゃなくて全部載せてほしいところではありますが、確認します。アップロードしないということでしょうか？「配列ongrdmnam[]にフォルダ内のファイルパスを取得」っていうのは、例えば`ongrdmnam[0]`は`themesong.mp3`ということですか？

[yotuya]

早速見ていただきありがとうございます。
配列ongrdmnam[]は正確には二次元のongrdmnam[a][b]とongjyunam[a][b]があり、
ongrdmnamはシャッフル（混番）再生用でongjyunamはシーケンシャル（順番）再生用です。
再生フォルダは複数選択可能で、再生フォルダの切替と再生順番の切替を可能にしています。
aはフォルダ番号（フォルダ選択順番）を格納（選択した順番で番号を付与）
bはパス名（フォルダ名+ファイル名）を格納（これをmedia.srcに格納）
これは自分好みの音楽再生コントロールを作ろうとHLMLで挑戦したものです。
（HTMLで作成した親父と私の備忘録の中の音楽再生コントロール部分です）
HTMLファイルをドキュメントに格納し起動したときも同じような現象でした。
現在はセキュリティの関係と分かりHTMLをミュージックに格納し起動しています。
そこでGASに移植しGASから起動するとセキュリティの問題もなくなると思い移植しました。

このソースはGAS移植前の正常に動作していたソースでそのままGASに移植しました。
GASで起動するとコントロールは正常に表示され、各操作ボタンも正常に機能します。
フォルダ名もファイル名も正常に表示され、再生フォルダの切替も正常にできます。
しかし音楽の再生だけはできません。
このほかにも自分好みの画像表示コントロールもあります。
やはりセキュリティの関係でHTMLはピクチャに格納し起動しています。
これがうまくいくと音楽と画像を一つにまとめることができます。
やはり画像も同じ現象が出ていますがこれが解決できればヒントになります。

ソースは長くて全部おさまらないので主要部分だけにしました。
<audio id="audio"></audio>
<script type="text/javascript">
var media = document.getElementById("audio"); //オーディオタグ
var ongstp = 1; //演奏状態 0:連続演奏 1:停止 2:単独演奏
var ongfld = 0; //音楽演奏中フォルダ番号（配列添数）
var ongfil = 0; //音楽演奏中ファイル番号（配列添数）
var ongfldmax = 0; //音楽表示中最大フォルダ数
var ongfilmax = 0; //音楽演奏中最大ファイル数
var ongallmax = 0; //音楽パス取得中最大ファイル数
var ongjyunam = new Array(); //音楽パス名（順番）
var ongrdmnam = new Array(); //音楽パス名（混番）
var ongfldfil = new Array(); //音楽フィールド別ファイル数
//初期設定
var volume = 0.2; //演奏音量 0～0.7
media.volume = volume; //音楽ボリューム設定
var sektim = 0; //演奏時間

//-- 音楽処理 --------------------------------------------------------------------------
//フォルダ選択
function ongpasget() {
// document.getElementById('playstrt').innerHTML = "開"; 
document.getElementById('playstop').innerHTML = "<b>停</b>"; 
// document.getElementById('playback').innerHTML = "－"; 
document.getElementById('ongpas').innerHTML = "---";
if (ongstp == 0) { //演奏開始中
lisntei(); //演奏停止処理
}
//非表示INPUTボタン押下
var event = document.createEvent( "MouseEvents" ); //イベントオブジェクト
event.initEvent("click", false, true); //イベント設定
document.getElementById('ongfilselct').dispatchEvent(event); //INPUTクリック
}
　　　　　　　　｜
　　　　　　　　｜
//音楽演奏 ------------------------------
function ongplay() {
var dspfilnam = ongrdmnam[ongfld][ongfil].substr(ongrdmnam[ongfld][ongfil].lastIndexOf("/") + 1);
var dspfilnam = dspfilnam.substring(0,dspfilnam.lastIndexOf("."));
if (ongfld == 0) {
dspfilnam = "[ " + dspfilnam + " ]";
}
document.getElementById('ongpas').innerHTML = dspfilnam; //ファイル名表示
media.pause(); //演奏停止処理
media.currentTime = 0; //演奏位置初期化
media.src = ongrdmnam[ongfld][ongfil]; //演奏パス名設定
media.play(); //演奏処理
}
//音楽自動演奏 ------------------------------
media.onended = function(){
if (ongfil == ongfilmax - 1) {ongfil = 0;} else {ongfil = ongfil + 1;}
var dspfilnam = ongrdmnam[ongfld][ongfil].substr(ongrdmnam[ongfld][ongfil].lastIndexOf("/") + 1);
var dspfilnam = dspfilnam.substring(0,dspfilnam.lastIndexOf("."));
if (ongfld == 0) {
dspfilnam = "[ " + dspfilnam + " ]";
}
document.getElementById('ongpas').innerHTML = dspfilnam; //ファイル名表示
media.src = ongrdmnam[ongfld][ongfil]; //演奏パス名設定
media.play(); //演奏
}
//音楽パス取得 ------------------------------
function ongfileListDirectory(files) {
//ファイルパス配列作成（全フォルダ/フォルダ別シーケンシャル）
var allfil = ongallmax; //全フォルダファイル数（複数選択））
var fldnum = ongfldmax + 1; //フォルダ番号（=0:全フォルダ >1:フォルダ別）
var fldfil = 0; //フォルダ別ファイル数
if (ongallmax == 0) {ongjyunam[0] = new Array();} //全フォルダファイル配列追加
ongjyunam[fldnum] = new Array(); //フォルダ別ファイル配列追加
for (i = 0; i < files.length; i++) {
if (files[i].name.endsWith('.MP3') == true || files[i].name.endsWith('.mp3') == true) { //音楽ファイル
ongjyunam[0][allfil] = files[i].webkitRelativePath; //全フォルダパス名取得
ongjyunam[fldnum][fldfil] = files[i].webkitRelativePath; //フォルダ別パス名取得
allfil = allfil + 1;
fldfil = fldfil + 1;
}
}
if (fldfil > 0) {　//対象フォルダ選択済
//全フォルダシャッフル配列作成
var pashclone = ongjyunam[0].concat(); //全フォルダ配列のクローン
var l = allfil; //全フォルダファイル数
var filtmp = new Array(); //作業用配列
while(l-- > 0) {
var i = Math.floor(Math.random() * l); //乱数取得
filtmp.push(pashclone[i]); //全フォルダシャッフル配列に追加
pashclone.splice(i, 1); //pashcloneから削除
}
ongrdmnam[0] = filtmp; //全フォルダ混番配列に格納
//フォルダ別シャッフル配列作成
var pashclone = ongjyunam[fldnum].concat(); //パス名のクローン
var l = fldfil;
var filtmp = new Array(); //作業用配列
while(l-- > 0) {
var i = Math.floor(Math.random() * l); //乱数取得
filtmp.push(pashclone[i]); //フォルダ別シャッフル配列に追加
pashclone.splice(i, 1); //pashcloneから削除
}
ongrdmnam[fldnum] = filtmp; //フォルダ別シャッフル配列に追加
ongfldmax = fldnum; //最大フォルダ数
ongallmax = allfil; //最大ファイル数（複数選択加算用）
ongfldfil[0] = allfil; //全フォルダファイル数を配列に格納
ongfldfil[fldnum] = fldfil; //フォルダ別ファイル数を配列に格納
ongfld = fldnum; //演奏フォルダ初期番号
ongfil = 0; //演奏ファイル初期番号
ongfilmax = ongfldfil[ongfld];　//表示最大ファイル数
sektim = 0; //演奏位置初期化
//取得フォルダ表示
var dspfldnam = ongrdmnam[ongfld][ongfil].substring(0,ongrdmnam[ongfld][ongfil].lastIndexOf("/"));
document.getElementById('ongpas').innerHTML = dspfldnam.substr(0,18); //フォルダ名表示
document.getElementById('playstrt').innerHTML = "<b>演</b>"; 
document.getElementById('playback').innerHTML = "<b>削</b>"; 
if (ongfld == 2) { //フォルダ複数選択
document.getElementById('ongfldbtn').innerHTML = "<b>替</b>"; //ボタン名変更
}
} else { //対象フォルダ以外
document.getElementById('ongpas').innerHTML = "選択folder 対象外";
}
}

　　　　｜
　　　　｜
</script>
<body>
<div id="hyobgmwak">
<div id="hyowak">
<div id="kamon">
<img src="https://drive.google.com/uc?id=16GtqNtZEuxq6N_xi-f50brhIKySeAI1I" alt="四ツ谷家の家紋" width="55" height="55">
</div>
<div id="taitl">
<h1>四 ッ 谷 家 の 備 忘 録</h1>
<p>四ツ谷藤三郎の備忘録をもとに四ツ谷晃の備忘録を追加</p>
</div>
</div>
<div id="bgmwak">
<div id="btndsp">
<button id="foldsel" onClick="ongpasget()"><b>選</b></button><input type="file" webkitdirectory directory multiple onChange="ongfileListDirectory(this.files)" id="ongfilselct" style="display:none;"><button id="ongfldbtn" onClick="ongfldsel()">―</button><button id="playstrt" onClick="lisnkai()">―</button><button id="playstop" onClick="lisntei()"><b>停</b></button><button id="playback" onClick="ongmodoru()">―</button><button onClick="ongvoludai()"><b>▲</b></button><button onClick="ongvolusyo()"><b>▼</b></button>
</div>
<div id="ongpas">
folder未選択
</div>
<canvas id="canvs" width="160" height="2"></canvas>
</div>
</div>
<div id="iframewak">
<iframe id="ifrmencont" name="ifram" src="https://script.google.com/macros/s/AKfycbxQOayD1oYR8kFXeFRHSzlXMJSicQvQdEvVA0yJ_SiRydfPmr2B/exec?p=kousin" frameborder="1" scrolling="no"></iframe>
</div>
</body>

[papinianus]

とりあえず、ここだとインデントが崩れて読みづらいので、本文を編集していただけないでしょうか？

[yotuya]

すいません。編集画面ではインデントがついていたのですが。
テラテイルは初めてなのでまだ使い方がいまいちです。
タブをスペースで置き換えました。
力ずくで修正したのでチョットずれているかもしれません。

ソースは長くて全部おさまらないので主要部分だけにしました。
<audio id="audio"></audio>
<script type="text/javascript">
var media = document.getElementById("audio"); //オーディオタグ
var ongstp = 1; //演奏状態 0:連続演奏 1:停止 2:単独演奏
var ongfld = 0; //音楽演奏中フォルダ番号（配列添数）
var ongfil = 0; //音楽演奏中ファイル番号（配列添数）
var ongfldmax = 0; //音楽表示中最大フォルダ数
var ongfilmax = 0; //音楽演奏中最大ファイル数
var ongallmax = 0; //音楽パス取得中最大ファイル数
var ongjyunam = new Array(); //音楽パス名（順番）
var ongrdmnam = new Array(); //音楽パス名（混番）
var ongfldfil = new Array(); //音楽フィールド別ファイル数
//初期設定
var volume = 0.2; //演奏音量 0～0.7
media.volume = volume; //音楽ボリューム設定
var sektim = 0; //演奏時間
//-- 音楽処理 --------------------------------------------------------------------------
//フォルダ選択
function ongpasget() {
// document.getElementById('playstrt').innerHTML = "開";
document.getElementById('playstop').innerHTML = "<b>停</b>";
// document.getElementById('playback').innerHTML = "－";
document.getElementById('ongpas').innerHTML = "---";
if (ongstp == 0) { //演奏開始中
lisntei(); //演奏停止処理
}
//非表示INPUTボタン押下
var event = document.createEvent( "MouseEvents" ); //イベントオブジェクト
event.initEvent("click", false, true); //イベント設定
document.getElementById('ongfilselct').dispatchEvent(event); //INPUTクリック
}
　　　　　　　｜
　　　　　　　｜
//音楽演奏 ------------------------------
function ongplay() {
var dspfilnam = ongrdmnam[ongfld][ongfil].substr(ongrdmnam[ongfld][ongfil].lastIndexOf("/") + 1); [
var dspfilnam = dspfilnam.substring(0,dspfilnam.lastIndexOf("."));
if (ongfld == 0) {
dspfilnam = "[ " + dspfilnam + " ]";
}
document.getElementById('ongpas').innerHTML = dspfilnam; //ファイル名表示
media.pause(); //演奏停止処理
media.currentTime = 0; //演奏位置初期化
media.src = ongrdmnam[ongfld][ongfil]; //演奏パス名設定
media.play(); //演奏処理
}
//音楽自動演奏 ------------------------------
media.onended = function(){
if (ongfil == ongfilmax - 1) {ongfil = 0;} else {ongfil = ongfil + 1;}
var dspfilnam = ongrdmnam[ongfld][ongfil].substr(ongrdmnam[ongfld][ongfil].lastIndexOf("/") + 1);
var dspfilnam = dspfilnam.substring(0,dspfilnam.lastIndexOf("."));
if (ongfld == 0) {
dspfilnam = "[ " + dspfilnam + " ]";
}
document.getElementById('ongpas').innerHTML = dspfilnam; //ファイル名表示
media.src = ongrdmnam[ongfld][ongfil]; //演奏パス名設定
media.play(); //演奏
}
//音楽パス取得 ------------------------------
function ongfileListDirectory(files) {
//ファイルパス配列作成（全フォルダ/フォルダ別シーケンシャル）
var allfil = ongallmax; //全フォルダファイル数（複数選択））
var fldnum = ongfldmax + 1; //フォルダ番号（=0:全フォルダ >1:フォルダ別）
var fldfil = 0; //フォルダ別ファイル数
if (ongallmax == 0) {ongjyunam[0] = new Array();} //全フォルダファイル配列追加
ongjyunam[fldnum] = new Array(); //フォルダ別ファイル配列追加
for (i = 0; i < files.length; i++) {
if (files[i].name.endsWith('.MP3') == true || files[i].name.endsWith('.mp3') == true)
{ //音楽ファイル
ongjyunam[0][allfil] = files[i].webkitRelativePath; //全フォルダパス名取得
ongjyunam[fldnum][fldfil] = files[i].webkitRelativePath; //フォルダ別パス名取得
allfil = allfil + 1;
fldfil = fldfil + 1;
}
}
if (fldfil > 0) {　//対象フォルダ選択済
//全フォルダシャッフル配列作成
var pashclone = ongjyunam[0].concat(); //全フォルダ配列のクローン
var l = allfil; //全フォルダファイル数
var filtmp = new Array(); //作業用配列
while(l-- > 0) {
var i = Math.floor(Math.random() * l); //乱数取得
filtmp.push(pashclone[i]); //全フォルダシャッフル配列に追加
pashclone.splice(i, 1); //pashcloneから削除
}
ongrdmnam[0] = filtmp; //全フォルダ混番配列に格納
//フォルダ別シャッフル配列作成
var pashclone = ongjyunam[fldnum].concat(); //パス名のクローン
var l = fldfil;
var filtmp = new Array(); //作業用配列
while(l-- > 0) {
var i = Math.floor(Math.random() * l); //乱数取得
filtmp.push(pashclone[i]); //フォルダ別シャッフル配列に追加
pashclone.splice(i, 1); //pashcloneから削除
}
ongrdmnam[fldnum] = filtmp; //フォルダ別シャッフル配列に追加
ongfldmax = fldnum; //最大フォルダ数
ongallmax = allfil; //最大ファイル数（複数選択加算用）
ongfldfil[0] = allfil; //全フォルダファイル数を配列に格納
ongfldfil[fldnum] = fldfil; //フォルダ別ファイル数を配列に格納
ongfld = fldnum; //演奏フォルダ初期番号
ongfil = 0; //演奏ファイル初期番号
ongfilmax = ongfldfil[ongfld];　//表示最大ファイル数
sektim = 0; //演奏位置初期化
//取得フォルダ表示
var dspfldnam = ongrdmnam[ongfld][ongfil].substring(0,ongrdmnam[ongfld][ongfil].lastIndexOf("/"));
document.getElementById('ongpas').innerHTML = dspfldnam.substr(0,18); //フォルダ名表示
document.getElementById('playstrt').innerHTML = "<b>演</b>";
document.getElementById('playback').innerHTML = "<b>削</b>";
if (ongfld == 2) { //フォルダ複数選択
document.getElementById('ongfldbtn').innerHTML = "<b>替</b>"; //ボタン名変更
}
} else { //対象フォルダ以外
document.getElementById('ongpas').innerHTML = "選択folder 対象外";
}
}
　　　　｜
　　　　｜
</script>
<body>
<div id="hyobgmwak">
<div id="hyowak">
<div id="kamon">
<img src="https://drive.google.com/uc?id=16GtqNtZEuxq6N_xi-f50brhIKySeAI1I&quot; alt="四ツ谷家の家紋" width="55" height="55">
</div>
<div id="taitl">
<h1>四 ッ 谷 家 の 備 忘 録</h1>
<p>四ツ谷藤三郎の備忘録をもとに四ツ谷晃の備忘録を追加</p>
</div>
</div>
<div id="bgmwak">
<div id="btndsp">
<button id="foldsel" onClick="ongpasget()"><b>選</b></button>
<input type="file" webkitdirectory directory multiple onChange="ongfileListDirectory(this.files)" id="ongfilselct" style="display:none;">
<button id="ongfldbtn" onClick="ongfldsel()">―</button>
<button id="playstrt" onClick="lisnkai()">―</button>
<button id="playstop" onClick="lisntei()"><b>停</b></button>
<button id="playback" onClick="ongmodoru()">―</button>
<button onClick="ongvoludai()"><b>▲</b></button>
<button onClick="ongvolusyo()"><b>▼</b></button>
</div>
<div id="ongpas">
folder未選択
</div>
<canvas id="canvs" width="160" height="2"></canvas>
</div>
</div>
<div id="iframewak">
<iframe id="ifrmencont" name="ifram" src="https://script.google.com/macros/s/AKfycbxQOayD1oYR8kFXeFRHSzlXMJSicQvQdEvVA0yJ_SiRydfPmr2B/exec?p=kousin&quot; frameborder="1" scrolling="no"></iframe>
</div>
</body>

[yotuya]

編集画面で半角スペースを挿入しましたが駄目ですね。
編集画面にはCODEボタンがありません。
全角スペースならいいのでしょうか。
用事が済みしだい改めて挑戦します。

[papinianus]

> 編集画面で半角スペースを挿入しましたが駄目ですね。編集画面にはCODEボタンがありません。
質問の本文が編集可能なはずです(質問したことないから分からないけども)。また差分が管理されるので、上書きしても過去の入力が完全には失われません。質問本文に書いてください。スペースが消されるのはこのサイトの仕様です。

[macaron_xxx]

そもそも、音楽ファイルはローカルにあるんですよね？一旦アップロードする仕組みなどを使わないと実現はできませんよ。

[yotuya]

音楽ファイルはローカルです。アップロードはできています。ファイルのパス名は取得できて画面にもパス名が表示され再生ファイルの選択もできます。しかし再生されません。同じHTMLをローカルのミュージックフォルダで起動すると再生されます。これをGASに移植しました。以前あったセキュリティの関係でしょうか。
質問本文を直接編集する方法がまだ分かっていません。申し訳ありませんが取敢えずコード入力のできる新規質問を、「GASのWebアプリケーションでローカルの音楽ファイルを再生２」として再質問するのでそちらを見てください。その方が色分けされソースも見易いと思います。宜しくお願いします。ただ前回はソースが長くて全部おさまらなかったので主要部分になります。テラテイルの詳しい操作方法も調べたいと思います。

[yotuya]

回答ありがとうございます。数日前にNETACHILさんからFileReader()を使った回答があり、今日なんとか解決できました。途中経過や顛末記が「GASのWebアプリケーションでローカルの音楽ファイルを再生２」に掲載されているのでよろしければ見てください。いろいろな方法があるのですね。また何かで引っかかった時には試してみます。

[退会済みユーザー]

わかりました。音楽ファイルの再生できてよかったですね！

Answer 1

GASのWebアプリケーションでローカルの音楽ファイルを再生２で解決しました。

Answer 2

(new Audio("音楽ファイル名")).play();

でどうでしょうか？

Comments

[yotuya]

申し訳ありません。私の質問に不備があってまたその質問の修正方法がよく分からず「GASのWebアプリケーションでローカルの音楽ファイルを再生２」で再質問しました。おかげさまでその質問の回答でFileReaderを使い無事解決しました。そこには解決の顛末記も載っています。よろしければそちらも見てください。まだテラテイルの仕組みや操作方法がよくわからず不愉快な思いをしたのであればお許しください。連絡が遅れたことをお詫びします。ありがとうございました。