![見出し画像](https://assets.st-note.com/production/uploads/images/100639273/rectangle_large_type_2_a8771d53b774b7025414e0c92060dbb9.png?width=800)
Googleサイトで作るグループウェア(34)ーサウンドデータの埋め込みー
この記事を読んで欲しい方
Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Educationを導入している学校
①サウンドデータを埋め込む
サウンドデータは、YoutubeやYoutubeMusicの埋め込みなど、いろいろなやり方ありますが、ここではSoundCloud(サウンドクラウド)の曲を埋め込んでみます。
まずサウンドクラウドにアクセスしてアカウントを作成します。Googleアカウントですぐに登録できます。
![](https://assets.st-note.com/img/1679204164198-4HU27YRpY8.png?width=800)
次にSearchで「環境音楽」と入れてENTER(return)キーを押します。
すると、検索されてきたリストが出ますので、好みの音楽を聴いてみます。ここでは勉強用BGMのオレンジの矢印をクリックすると音楽を聴くことが出来ます。
![](https://assets.st-note.com/img/1679204359085-HEbS6SPlUF.png?width=800)
②埋め込みHTMLの取得
次に、アルバムの下にあるマークで、共有マークをクリックします。
![](https://assets.st-note.com/img/1679204710461-1NvgG5c4xm.png)
すると、小さな画面が出ますので、Embedタブをクリックします。
![](https://assets.st-note.com/img/1679204783095-iBXOZQdfbe.png?width=800)
Embedが開くと、CodeのところにHTMLプログラムが出ていますので、それを選んでコピーします。
Optionsでは画面の色や表示枠の高さ、開くと自動再生する等が設定できます。(自動再生はGoogleサイト内では動きません。タブで開くと動きだします。)
![](https://assets.st-note.com/img/1679204884544-lqurlbf1Bd.png?width=800)
③画面に埋め込む
Googleサイトで埋め込みたい場所のページを開いて、挿入>埋め込む>埋め込みコードを選択し、表示された「<html>コードをここに入力」部分に、先程コピーしたHTMLプログラムを貼り付けます。
下記画面では、クラウドトップサイトの、その他の機能ページに貼り付けています。
![](https://assets.st-note.com/img/1679205364858-Hh2RLO6Cup.png?width=800)
次へボタンを押すと、HTMLプログラムが動き出しますので、保存ボタンを押します。
![](https://assets.st-note.com/img/1679205459241-ZM85QyUMcb.png?width=800)
Googleサイトに埋め込まれましたので、公開ボタンを押して、サイトを保存します。
![](https://assets.st-note.com/img/1679205574139-3ONwBIRZZl.png?width=800)
デモを見る場合は、クラウドトップ:その他の機能の時計の下にありますので、御覧ください。
![](https://assets.st-note.com/img/1679205965122-JP2goYbSBm.png?width=800)
タブで開く場合は、右上のSoundCoudという部分をクリックすれば開きます。自動再生を設定していれば、タブが開くと音楽の再生が始まります。
SoundCloudの良いところは、iPadのバックグラウンドでも音楽が再生し続けるという部分です。YoutubeMusicでは有料にしないと出来ません。
この記事が気に入ったらサポートをしてみませんか?