見出し画像

Googleサイトで作るグループウェア(34)ーサウンドデータの埋め込みー

この記事を読んで欲しい方

Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Educationを導入している学校

①サウンドデータを埋め込む

サウンドデータは、YoutubeやYoutubeMusicの埋め込みなど、いろいろなやり方ありますが、ここではSoundCloud(サウンドクラウド)の曲を埋め込んでみます。

まずサウンドクラウドにアクセスしてアカウントを作成します。Googleアカウントですぐに登録できます。

SoundCloud

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

環境音楽

②埋め込みHTMLの取得

次に、アルバムの下にあるマークで、共有マークをクリックします。

共有マーク

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

共有画面

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

Embed画面

③画面に埋め込む

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

HTMLプログラムの埋め込み

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

埋め込まれたHTMLプログラム

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

Googleサイトにサウンドデータが埋め込まれた

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

SoundCloudの音楽再生画面

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



いいなと思ったら応援しよう!