1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

javascriptでmp3ファイルを再生

Last updated at Posted at 2020-01-19

HTMLを編集

<button id="btn">再生</button>
<button id="btn2">停止</button>

<audio id="audio"></audio>

これらを追加する

javascriptを書く

HTMLの中にscriptタグをかいてHTMLにjavascriptを書くか、
javascriptファイルを作ってそれでjavascriptを書くか。
今回はめんどくさいのでHTMLのなかにjavascriptを書きます。 headタグ内に書いてみてください
。 エラーでたら、bodyタグ内に書いてみましょう。

<script>
var btn = document.getElementById("btn"); //document.getElementByIdを使ってHTMLのbtnというIDを取得
var btn2 = document.getElementById("btn2");//document.getElementByIdを使ってHTMLのbtn2というIDを取得

btn.addEventListener('click', function(){   //もしbtn(再生)をクリックしたら..
   audio.src='ここにmp3ファイル名を書く';
   audio.play(); //audioを再生
});

btn2.addEventListener('click', function(){
   audio.pause(); //audioを止める
   audio.currentTime = 0; //時間を0に
});
</script>

これで再生と停止ができたみたいです!

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?