mp3ファイルのアップロードと再生方法
2024/02/25
mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したかった。以下にその方法をメモ。
ソースコード
アップロード
受信側
do{
if( $_FILES['music']['size'] < 1 ) break; //ファイルサイズチェック
if( $_FILES['music']['error'] != 0 ) break; //エラーチェック
if( $_FILES['music']['type'] != 'audio/mpeg' ) break; //mp3かどうかチェック
$path = './file/';
$file = date('YmdHis') . '.mp3';
if( !move_uploaded_file($_FILES['music']["tmp_name"], $path . $file) ) break; //アップロード
$flg = true;
}while(0);
送信側
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<input type="file" name="music"><br>
<input type="submit" value="submit">
</form>
再生
<audio id="audio" controls>
<source src="test.mp3">
</audio>
<input type="button" value="play" onclick="audio_play()">
<input type="button" value="pause" onclick="audio_pause()">
<script type="text/javascript">
function audio_play() {
audio.play();
}
function audio_pause() {
audio.pause();
}
</script>
関連記事
-
-
HTMLで画像の指定した部分のみリンクを設定する方法
画像を表示させて、その画像の一部分のみにリンクを張りたかった。画像を重ね合わせた ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
-
HTMLのimgタグでブラウザ幅によって異なる画像を表示する方法
あるサイトのコーディングデータを貰った際に1つのimgタグに対して複数の画像が指 ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...