
Googleサイトで作るグループウェア(34)ーサウンドデータの埋め込みー
この記事を読んで欲しい方
Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Educationを導入している学校
①サウンドデータを埋め込む
サウンドデータは、YoutubeやYoutubeMusicの埋め込みなど、いろいろなやり方ありますが、ここではSoundCloud(サウンドクラウド)の曲を埋め込んでみます。
まずサウンドクラウドにアクセスしてアカウントを作成します。Googleアカウントですぐに登録できます。

次にSearchで「環境音楽」と入れてENTER(return)キーを押します。
すると、検索されてきたリストが出ますので、好みの音楽を聴いてみます。ここでは勉強用BGMのオレンジの矢印をクリックすると音楽を聴くことが出来ます。

②埋め込みHTMLの取得
次に、アルバムの下にあるマークで、共有マークをクリックします。

すると、小さな画面が出ますので、Embedタブをクリックします。

Embedが開くと、CodeのところにHTMLプログラムが出ていますので、それを選んでコピーします。
Optionsでは画面の色や表示枠の高さ、開くと自動再生する等が設定できます。(自動再生はGoogleサイト内では動きません。タブで開くと動きだします。)

③画面に埋め込む
Googleサイトで埋め込みたい場所のページを開いて、挿入>埋め込む>埋め込みコードを選択し、表示された「<html>コードをここに入力」部分に、先程コピーしたHTMLプログラムを貼り付けます。
下記画面では、クラウドトップサイトの、その他の機能ページに貼り付けています。

次へボタンを押すと、HTMLプログラムが動き出しますので、保存ボタンを押します。

Googleサイトに埋め込まれましたので、公開ボタンを押して、サイトを保存します。

デモを見る場合は、クラウドトップ:その他の機能の時計の下にありますので、御覧ください。

タブで開く場合は、右上のSoundCoudという部分をクリックすれば開きます。自動再生を設定していれば、タブが開くと音楽の再生が始まります。
SoundCloudの良いところは、iPadのバックグラウンドでも音楽が再生し続けるという部分です。YoutubeMusicでは有料にしないと出来ません。