洋楽で英語を勉強するには【HTML】
ここではHTMLのvideoタグで洋楽を聞きながら英語の勉強をする方法を解説します。
英語を勉強するにはいろんな方法がありますがもっとも効果があるのは、楽しみながら勉強することです。
なぜか？ それは楽しいことは継続できるからです。
洋楽のサンプルとしてバーバラ・ストライサンドの「Woman in Love」を用意しました。
ただし、歌っているのはベルギーの歌手ダナ・ウィナー(Dana Winner)です。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article016.aspx」を作成します。
無料で使用できるVisual Studio Code、お好みのエディタを使用するときはHTMLページ「Article016.html」を作成してください。
-
Webフォーム/HTMLページのヘッダー内「<head>...</head>」にscriptタグを追加してjQueryの最新のライブラリを追加します。
ここではjQuery 3.6.0を取り込んでいます。
さらに、scriptタグを追加したら以下のjQueryのコードを入力します。
行5-8ではHTMLのcheckbox要素(input id="chk-left-toggle" type="checkbox")に「click」イベントを登録しています。
HTMLのCheckBox(左側に配置されているトグルボタン)をクリックするとこのイベントが実行されます。
行6ではCheckBox要素(input id="chk-left-toggle" type="checkbox")のvalue属性の値「lyrics-left」を取得して変数「className」に保存しています。
行7ではjQueryのtoggle()関数を使用してHTMLの「pre.lyrics-left」要素を表示・非表示に切り替えています。
行10-13では右側に配置されたcheckbox要素(input id="chk-right-toggle" type="checkbox")に対して同様の処理を行っています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
$('input.chk-left-toggle').click(function () {
var className = $(this).val();
$('pre.' + className).toggle();
});
$('input.chk-right-toggle').click(function () {
var className = $(this).val();
$('pre.' + className).toggle();
});
});
</script>
-
「<body>...</body>」要素内に以下のHTMLを配置します。
行3-6ではHTMLのvideo要素で音楽を再生できるようにしています。
video要素に「loop」属性を追加すると音楽が無限再生されます。
手動で再生させたいときは「loop」属性を追加しないでください。
行4のsource要素のsrc属性には音楽のファイルのパスを指定します。
行10-13では英語の歌詞を表示・非表示に切り替えるトグルボタンを定義しています。
行16-19では日本語の和訳を表示・非表示に切り替えるトグルボタンを定義しています。
<table>
<caption>
<video width="150" height="80" loop="loop" controls="controls">
<source src="video/article016/Woman_in_Love_Danna_Winner.m4a" type="video/mp4" />
Your browser does not support the video tag.
</video>
</caption>
<tr>
<th>
<label class="w3-switch">
<input id="chk-left-toggle" class="chk-left-toggle" type="checkbox" value="lyrics-left" checked="checked" />
<span class="w3-switch-slider round"></span>
</label>
</th>
<th>
<label class="w3-switch">
<input id="chk-right-toggle" class="chk-right-toggle" type="checkbox" value="lyrics-right" checked="checked" />
<span class="w3-switch-slider round"></span>
</label>
</th>
</tr>
<tr>
<td>
<pre class="x1-pre lyrics-left"><code>
Life is a moment in space
When the dream is gone
It's a lonelier place
I kiss the morning good-bye
But down inside you know
We never know why
The road is narrow and long
When eyes meet eyes
And the feeling is strong
I turn away from the wall
I stumble and fall
But I give you it all
I am a woman in love
And I'd do anything
To get you into my world
And hold you within
It's a right I defend
Over and over again
What do I do?
With you eternally mine
In love there is
No measure of time
They planned it all at the start
That you and I
Live in each others heart
We may be oceans away
You feel my love
I hear what you say
No truth is ever a lie
I stumble and fall
But I give you it all
I am a woman in love
And I'd do anything
To get you into my world
And hold you within
It's a right I defend
Over and over again
What do I do?
I am a woman in love
And I'm talkin to you
You know, I know, how it feels?
What a woman can do
It's a right I defend
Over and over again
I am a woman in love
And I'd do anything
To get you into my world
And hold you within
It's a right I defend
Over and over again
</code></pre>
</td>
<td>
<pre class="x1-pre lyrics-right"><code>
人生は宇宙の中の一瞬
夢がなくなれば
それは孤独な場所になる
朝にお別れのキスをしたけど
あなたの心の中はわからない
私たちはその理由を知らない
道は狭くて長い
目と目が合った時
感じる強さ
壁から離れて
つまずいて落ちたとしても
私はあなたにすべてを捧げる
私は愛に生きる女
何でもする
あなたを私の世界に導くために
そしてあなたを抱きしめる
それが私を守ること
何度も繰り返す
私は何をすればいい？
あなたと永遠にいられるのなら
愛はそこにある
時間を測ることはできない
最初にすべて計画されていた
あなたと私で
人生はそれぞれの心の中に
私たちが海に隔てられても
あなたは私の愛を感じる
あなたの言うことが聞こえる
真実は決して嘘をつかない
私がつまずいて落ちても
私はあなたにすべてを捧げる
私は愛に生きる女
私は何でもする
あなたを私の世界に連れて行くために
そしてあなたを抱きしめて
それが私を守ること
何度も繰り返す
私は何をすればいい？
私は愛に生きる女
そして私はあなたと話をする
あなたは知ってる？私の感じ方を
女ができることは何？
それが私を守ること
何度も繰り返す
私は愛に生きる女
私は何でもする
あなたを私の世界に連れて行くために
そしてあなたを抱きしめて
それが私を守ること
</code></pre>
</td>
</tr>
</table>
操作手順
-
Webページが表示されたらビデオの[再生]ボタンをクリックして音楽を再生してください。
デフォルトでは英語の歌詞と日本語の和訳（意訳）が表示されています。
英語の歌詞や日本語の和訳を消したい(非表示)ときはそれぞれの上に表示されているトグルボタンをクリックします。
-
英語の歌詞や日本語の和訳を表示したいときは、再度トグルボタンをクリックしてください。
すると、英語の歌詞と日本語の和訳が表示されます。
-
最初は英語の歌詞と日本語の和訳の両方を表示させて英語の歌詞の意味を理解します。
英語の歌詞の意味が理解できるようになったら日本語の和訳のトグルボタンをクリックして非表示にします。
最後に、英語の歌詞も非表示にして英語が聞き取れるようになるまで繰り返し音楽を聞きます。