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

前提・実現したいこと

親父と自分の備忘録をHTMLで作成しローカルで起動して閲覧とメンテをしています。
閲覧しながら音楽を聴きたいと思いBGMのコントローラをHTMLで作成し追加しました。
HTMLはセキュリティーの関係でミュージックフォルダに格納して起動しています。
最近GASのWebアプリケーションを知りセキュリティーの問題が回避できると思いました。
それでHTMLをGASに移植しましたがdoGet関数やCSSの読込など苦労しました。

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

HTMLは表題部分+BGMコントローラ部分とメニューとコンテンツの部分があり、
表題部分+BGMコントローラ部分は正常に表示され機能しています。
メニューとコンテンツの部分は問題があり補足情報で説明します。

BGMコントローラ部分は正常に表示され機能していますが再生ができません。
音楽ファイルのパス名は正常に取得されファイル名も表示されます。
再生フォルダは複数選択でき再生フォルダも正常に切替できます。
エラーメッセージは全くありません。
以前HTMをドキュメントで起動したときも同じような現象がありました。
これはミュージックフォルダでHTMLを起動することで解決しています。
GASでもセキュリティー問題が発生するのかGAS独自の方法あるのかわかりますん。

該当のソースコード

言語 HTM、JavaScript

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <?!= HtmlService.createHtmlOutputFromFile('Css').getContent(); ?>
  </head>

</head>
<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 対象外";
		}
	}
	//ブログレスバー表示
	media.ontimeupdate = function(){
		var barlen = media.currentTime / media.duration;
		if (canvs.getContext) {
			var bar = canvs.getContext('2d');
			var fillWidth = barlen * canvs.width;
			bar.clearRect(0, 0, canvs.width, canvs.height);
			bar.fillStyle = "rgb(15, 222, 119)";
			bar.fillRect(0, 0, fillWidth, canvs.height);
		}
	}
	//ボタンホバー処理(タブレット用) ------------------------------
	var linkTouchStart = function(){
		thisAnchor = $(this);
		touchPos = thisAnchor.offset().top;
		moveCheck = function(){
			nowPos = thisAnchor.offset().top;
			if(touchPos == nowPos){
				thisAnchor.addClass("hover");
			}
		}
		setTimeout(moveCheck,10);
	}
	var linkTouchEnd = function(){
		thisAnchor = $(this);
		hoverRemove = function(){
			thisAnchor.removeClass("hover");
		}
		setTimeout(hoverRemove,300);
	}
	//イベント取得
	$(document).on('touchstart','button',linkTouchStart);
	$(document).on('touchend','button',linkTouchEnd);
    //--------------------------------------------------------
</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>
</html>

試したこと

GASのWebアプリケーションは全くの初歩です。
Webでサーフィンしましたが見つかりません。

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

使用しているブラウザはChromeの最新版です。
移植はGoogleDriveのScriptEdterでおこないました。
この問題のほかにもう一つ問題があります。
ソースの末尾にインフレームのタグがあります。
ここに備忘録のメニューとコンテンツを表示します。
これは少し前に「GASでインフレームにページを表示」で質問しています。
よろしければ見てください。
1件回答がありますが自分の未熟もあり未解決です。
今再確認したら修正後の更新をしていなかったようです。

退会済みユーザー

2019/01/09 23:05

今ってGASで音楽が再生できなくて困っているんですよね？一旦、困っている部分だけのwebページを作成することに取り組んだ方がいいと思います。今回だと音楽を一曲再生するだけのwebページでそれ以外の機能は全て省いたwebページです。

yotuya

2019/01/10 02:02

早速見ていただいてありがとうございます。ただ回答内容からすると1回目の質問を見たのではないでしょうか。1回目の質問は確かにソースがあまりにも部分的で閲覧者から指摘がありました。それで指摘への返信で詳しいソースを投稿したのですが、インデントのあるcode入力ができず分かりずらいものになってしまいました。それでCODE入力のできる新規質問で再度「GASのWebアプリケーションでローカルの音楽ファイルを再生２」として再質問しました。そちらには詳しいソースが書いてあります。音楽パスを配列に取得する関数もあります。確かに最初は一曲の再生指定ですがその再生が終わると。onendedイベントで次の曲を再生する関数があります。その最初の一曲目の再生がされないのです。　このソースは現在セキュリティーの関係で、HTMLをミュージックフォルダに格納して、そこから起動して正常に機能しているものと同じです。GASに合わせheadは修正しましたが全く同じです。だから正常に機能すると思っていますが。　ただ以前に同じソースをドキュメントフォルダに格納してそこから起動したら、今回と同じようにパスは取得できているのに再生できないということがありました。それでいろいろ調べてセキュリティーの関係と分かり、HTMLをミュージックフォルダに格納しそこから起動するようにして解決しました。　GASのWebアプリケーションは一般のWebサーバーから起動するものと同じと理解しています。だからセキュリティーの問題はないと思いますがあるのでしょうか。あるいはgoogleDrive上の画像を表示するときと同じように、音楽ファイルもGAS特有の指定方法があるのでしょうか。あるいは画像と同じようにフォルダの共有化？などが必要なのでしょうか。　でもこの指摘がここにあるということは「GASのWebアプリケーションでローカルの音楽ファイルを再生２」を見たということでしょうか。まだテラテイルの仕組みが良く分かっていません。　指摘のようにその部分だけのWebページで確認するのも方法ですね。インフレームの件もそれで見つけることができました。でもほんの一部だけGASに合わせた部分はありますが、ローカル起動で正常に動いてたソースと全く同じなのになぜと思います。何かヒントがあれば教えてください。

退会済みユーザー

2019/01/10 02:29

ここは「GASのWebアプリケーションでローカルの音楽ファイルを再生２」ですね。①に対するpapinianusさんの指摘はその通りだと思います。ソースが全て記載されていないと回答しにくいです。でも僕のはそれとはまた別の次元の話で、単純に「一旦、機能を制限して作成に取り組んでみてはどうでしょうか？」という提案です。＞ローカル起動で正常に動いてたソースと全く同じなのになぜと思います。少し調べただけなので詳しくわかりませんが、 https://stackoverflow.com/questions/38265242/play-audio-local-file-with-html たとえばこのHorst Jahnsさんの回答だとFileReaderというのを使っています。それが必要なのかな？とは思いましたが詳しく調べていないので分からないです。

shozi3

2019/01/10 02:30

エラーメッセージは出ていないとのことですが、それはChromeのコンソールで確認したということですよね？ media.src のパス名が気になるところですね。

yotuya

2019/01/10 06:47

たしかに NETACHILさんのおっしゃる通りインフレームの解決の件で実感しています。ローカルではでは影響なくてもGASでは影響する部分があるかもしれません。直接ファイル名を指定した一曲再生のページで確認していこうと思います。　shozi3さんの推察の通りコンソールでは確認していませんでした。早速確認します。GoogeDrive上の画像ファイルの表示も、GASらしい指定方法とフォルダの共有化が必要でした。同じようにローカルの音楽ファイルも何かあるのでしょうか。ローカルのフォルダの共有化ってできるのでしょうか。試してみたいです。

yotuya

2019/01/10 08:20

早速コンソールのエラーを確認しました。よくわからないので以下に示します。 ---------- HTMLをローカルで起動 ---------- 起動したとき ---------- Uncaught ReferenceError: $ is not defined at index.html:265 音楽ファイルを選択したとき ---------- エラー表示なし音楽ファイルを再生したとき ---------- エラー表示なし ---------- HTMLをGASで起動 ---------- 起動したとき ---------- Uncaught TypeError: Cannot read property 'children' of undefined at HTMLDocument.changeFontSize (script.js:37) ------------ userCodeAppPanel:255 Uncaught ReferenceError: $ is not defined at userCodeAppPanel:255 音楽ファイルを選択したとき ---------- エラー表示なし音楽ファイルを再生したとき(再生ボタンをクリックしたとき） ---------- GET https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://n-o4bbpfpkfns3rs6cneols5liwplqktmhsin4n4y-0lu-script.googleusercontent.com/%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25AB/%25E6%259C%2588%25E5%2585%2589.mp3&followup=https://n-o4bbpfpkfns3rs6cneols5liwplqktmhsin4n4y-0lu-script.googleusercontent.com/%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25AB/%25E6%259C%2588%25E5%2585%2589.mp3 400 ------------- userCodeAppPanel:1 Uncaught (in promise) DOMException 正常に動いていても実害の分からないエラーは出ているのですね。これからの参考になりました。正常に動作しても確認していきます。 GASで再生したときのエラーで％・・％・・％・・.mp3は日本語のファイル名でしょうか。ローカルの音楽ファイルなのに先頭のhttps://・・・が気になりますね。最後の400は見つからないという意味でしょうか。コンソールのエラーメッセージから解析する方法はまだよくわかりませんが調べてみます。　このエラーを見て分かったことやヒントがあれば教えてください。よろしくお願いいたします。

yotuya

2019/01/11 02:17

追記　申し訳ありません。以下の本文作成中に質問を再確認したら、投稿した回答の結果報告とお礼が消えていました。確か投稿完了のダイアログを見た記憶ですが。　早速回答部分だけを打込して確認しました。見事に再生できました。改めてお礼申し上げます。このほかにも私好みの画像+音楽のスライダーがあるのでGASに移植できます。ありがとうございます。本文　お疲れのところ我々初心者にお付き合いいただき感謝しています。今日の夜中2時過ぎに回答を確認しそのあと寝たのですが、いろいろ考えが浮かび結局眠れませんでした。HTMLの仕組の知識はまだまだ初心者ですが、今回のFileReader()の解決方法と、shozi3さんからの指摘で確認したコンソールのエラー内容から、私なりに推察したことがあります。知識を広げるために合っているのか間違っているのか意見が聞きたくて投稿しました。　まず<img src=""または<audio src=""のsrc＝””は、HTMLと同じ階層にあるファイルを、ブラウザにダウンロードする指定ですね。だからローカルのミュージックフォルダにあるHTMLを起動したときは、同じ階層にある音楽フォルダのファイルをダウンロードして再生できますね。　以後はGASからHTMLを起動したときの話ですが、やはりサーバー上の同じ階層にある画像や音楽ファイルを、ブラウザにダウンロードして表示や再生しますね。しかし<input type="file"で取得したパス名を<audio src=""に指定した場合、今までは直接ローカルからブラウザにダウンロードすると思っていました。でもそれは間違いではないかと思いました。その理由は2つあります。　１．音楽再生の操作をしたときにコンソールに以下のエラーが出ました。 GET https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://n-o4bbpfpkfns3rs6cneols5liwplqktmhsin4n4y-0lu-script.googleusercontent.com/%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25AB/%25E6%259C%2588%25E5%2585%2589.mp3&followup=https://n-o4bbpfpkfns3rs6cneols5liwplqktmhsin4n4y-0lu-script.googleusercontent.com/%25E3%2582%25A4%25E3%2583%25AB%25E3%2582%25AB/%25E6%259C%2588%25E5%2585%2589.mp3 400 →GETでURLでファイル名です。　2．今回の回答内容の var reader = new FileReader(); reader.onload = function() { 　myAudio.src = reader.result; 　myAudio.play(); } です。 →reader.onloadは読込が完了の意味だと思います。ただreader.resultがわかりません(ファイル名ではないですね）。この2つからローカルのファイルをサーバーにアップロードしてさらにブラウザにダウンロードしているのではと思いました。このため時間がかかりいきなりplay()してもデータなしで再生できないし、onendedイベントも発生しないので次の曲も再生できないのでは。素人の考えですが以上の推察は当たっているでしょうか。　おかげさまで最初の再生と次以降の2つの再生ルーチンを修正すれば解決できると思います。またスライダーもGAS化できそうです。 5月に78歳になります。趣味に毛が生えた程度ですが昔取った杵柄で頭の老化を防ぐ意味でもこれからも頑張ります。これからもよろしくお願いします。

退会済みユーザー

2019/01/11 03:02 編集

ファイルを扱う場合大きく以下の３パターンがあるかと思います。 ①ファイル（画像、音楽）がどこかのサイトにある。 <img src="https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png > googleのロゴが表示されます。（googleのサイトから画像をダウンロードして表示します） ②index.htmlが存在する場所と同じ場所にファイル（画像、音楽）がある。 <img src="abc.png"> 以下の２パターンで画像が表示されます。１）index.htmlがローカルに存在していて、index.htmlと同じディレクトリにaaa.pngが存在していれば aaa.pngが画像としてブラウザに表示されます。（aaa.pngはローカルに存在している）２）index.htmlがサーバーに存在していて、index.htmlと同じディレクトリにaaa.pngが存在していれば aaa.pngが画像としてブラウザに表示されます。（aaa.pngはサーバーに存在している） ③ファイル（音楽、画像など）はローカルに存在するが、index.htmlがサーバーに存在する（今回のパターン） FileReaderを使う必要があります。 FileReaderはローカルのファイルをサーバーにアップロードしているわけではないです。ブラウザが扱えるように読み込んでくれているだけです。なので時間がかかる処理ではないと思います。

yotuya

2019/01/11 08:08

詳しい解説ありがとうございます。そうですよね。推察はしましたがチョットこじつけでした。わざわざそんな面倒なことしないですね。普通のWebサーバーやGASのサーバーを使い同じような使い方をするときはFileReaderを使うと覚えておきます。またFileReaderはもう少し勉強します。これで画像+音楽のスライダーもGASに移植でき、その結果サブフォルダも選択（再生リスト）できるし、一度に画像も音楽も両方選択できるようになります。今まで2か所に置いていたHTMLも一か所で済むのでメンテも楽になります。これで親父と私の備忘録を兄弟に公開できます。備忘録とスライダーのGASが完成したら報告します。　まだテラテイルの使い方が良くわかっておらづ、回答者の皆さんに失礼をしたかもしれません。あったとしたらおゆるしください。Helpなど参考にて勉強していきます。　私はこの年で暇つぶしと頭の老化防止と楽しみでちまちまやっています。完成したときは山の頂上に着いた時の気分です。しかし皆さんは仕事を持ちながらの対応と思いますが、とてもレスポンスが早く驚きそして楽しみにいています。本当にありがとうございました。

yotuya

2019/01/12 12:55

連日の投稿ですいません。今日はうれしい投稿です。ついに解決できました。最初は回答のソースを参考に本体の最初の再生と連続の再生のルーチンを、回答のルーチンに置き換えて試しましたが駄目でした。それで原点に戻ってやはり回答のソースを膨らませていきどこでだめになるか、順を追って改良しテストすることにしました。　チョット長くなりますが同じ問題を抱える方の参考のために顛末記を紹介します。興味がなければ飛ばしてください。　最初は新たにボタンを追加し<input type="file"を関連づけてinputボタンを非表示にし、追加ボタンで操作するようにしました。次にフォルダを選択できるように<input type="file"にwebkitdirectoryを追加しました。次に選択したフォルダのファイル情報を再生リストとなる配列に格納しました。実際には試行錯誤がありましたが見事一曲再生が成功しました。つぎに連続再生ができるように一曲再生と同じソースで、Audioオブジェクト.onendedで関数を追加しました。早速テストしたところ無事連続再生ができました。　これはいけると喜び本体の再生部分を修正しテストしましたがみごとNGでした。どこだろうと思いテスト用と本体のパス名取得のルーチンを比べたところ違いがありました。本体では取得したファイル情報を再生リストになる配列に格納するとき、.webkitRelativePathを付けていたのです。今は忘れていましたが多分フォルダ名やファイル名を表示するためにテキスト化していたのだと思います。そしてローカルで使っているときは問題なく動いていたのです。それで.webkitRelativePathを削除し再テストしました。逆に選択したフォルダ名が表示されなくなりました。　フォルダ名の表示部分ということで調べたら気が付きました。本体はテキストでしたがテストはオブジェクトだと。また落胆しましたが気が付きました。このフォルダ名やファイル名を抽出するルーチンだけ.webkitRelativePathをつければいいのだと。恐る恐るテストしました。フォルダ選択するとフォルダ名が表示され、再生ボタンを押下するとファイル名が表示され音が鳴りだしました。曲が終わると次の曲が再生されるます。曲を進る戻す音量の調整、再生フォルダの切替など全て今まで通り機能しています。　さらにサーバーで動いているのでサブフォルダも選択できるようになりました。山の頂上に着いた気分です。これで画像と音楽のスライダーを一つのHTMLで操作するめどが立ちました。　NETACHILさんに改めてお礼を申し上げます。この回答がなければGASは諦めていました。やはりサーバーからの起動でないと駄目なWebアプリもあるのでこれからも利用しようと思います。　それと気になるのが画面上部のメッセージですね。有料だと消えるそうですが無料でも消す裏技を知っている方はいませんか。でもこれだけのGASが無料で使えるのだから大きな声では言えませんね。以上顛末記でした。

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

回答1件

ベストアンサー

ひとまず一曲再生ならこれでいけると思います。

GoogleAppScript
1function doGet(e){
2    return HtmlService.createHtmlOutputFromFile('index');
3}

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <input type="file" name="file" id="file">
8    <audio controls id="myAudio" autoplay></audio>
9    
10<script>
11var file = document.getElementById('file');
12var myAudio = document.getElementById('myAudio');
13 
14function loadLocalMusic(e) {
15  var fileData = e.target.files[0];
16  var reader = new FileReader();
17  reader.onload = function() {
18    myAudio.src = reader.result;
19    myAudio.play();
20  }
21
22  reader.readAsDataURL(fileData);
23}
24file.addEventListener('change', loadLocalMusic, false);
25</script>
26
27  </body>
28</html>
29