JavaScript/Audio
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript｜Audio
~
//RIGHT:
//[[WebDesign/JavaScript]]
//#clear
HTML + CSS + JavaScriptによるページのサンプルソースを紹介...
＜AUDIO＞タグで配置された音声の再生、停止、リセット等、Ja...
~
***事例 Audioの制御 [[→DEMO>https://design.kyusan-u.ac....
音声の再生、停止、リセット等、[[DOM>JavaScript/DOM]]を使...
~
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"><...
<link rel="stylesheet" type="text/css" href="sam...
</head>
<body>
<Audio id="myAudio" src="sample.mp3" autoplay lo...
<button id="Play">play</button>
<button id="Pause">pause</button>
<button id="Reset">reset</button>
<button id="Mute">mute</button>
<button id="CurrentTime"></button>
</body>
</html>
~
''sample.css''
省略
~
''sample.js''
window.onload = function(){
document.getElementById("Play").addEventListener("cl...
document.getElementById("Pause").addEventListener("c...
document.getElementById("Reset").addEventListener("c...
document.getElementById("Mute").addEventListener("cl...
document.getElementById("myAudio").addEventListener(...
}
function Play(){
var audioSource = document.getElementById("myAudio")
audioSource.play();
}
function Pause(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
}
function Reset(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
audioSource.currentTime = 0;
}
function Mute(){
var audioSource = document.getElementById("myAudio")
if(audioSource.muted){
audioSource.muted = false;
}else{
audioSource.muted = true;
}
}
function TimeUpdate() {
var audioSource = document.getElementById("myAudio")
var t = Math.floor(audioSource.currentTime);
document.getElementById('CurrentTime').innerHTML = t...
}
~
~
~
終了行:
*JavaScript｜Audio
~
//RIGHT:
//[[WebDesign/JavaScript]]
//#clear
HTML + CSS + JavaScriptによるページのサンプルソースを紹介...
＜AUDIO＞タグで配置された音声の再生、停止、リセット等、Ja...
~
***事例 Audioの制御 [[→DEMO>https://design.kyusan-u.ac....
音声の再生、停止、リセット等、[[DOM>JavaScript/DOM]]を使...
~
''index.html'' ｜ ページの文書構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Basic Sample</title>
<script type="text/javascript" src="sample.js"><...
<link rel="stylesheet" type="text/css" href="sam...
</head>
<body>
<Audio id="myAudio" src="sample.mp3" autoplay lo...
<button id="Play">play</button>
<button id="Pause">pause</button>
<button id="Reset">reset</button>
<button id="Mute">mute</button>
<button id="CurrentTime"></button>
</body>
</html>
~
''sample.css''
省略
~
''sample.js''
window.onload = function(){
document.getElementById("Play").addEventListener("cl...
document.getElementById("Pause").addEventListener("c...
document.getElementById("Reset").addEventListener("c...
document.getElementById("Mute").addEventListener("cl...
document.getElementById("myAudio").addEventListener(...
}
function Play(){
var audioSource = document.getElementById("myAudio")
audioSource.play();
}
function Pause(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
}
function Reset(){
var audioSource = document.getElementById("myAudio")
audioSource.pause();
audioSource.currentTime = 0;
}
function Mute(){
var audioSource = document.getElementById("myAudio")
if(audioSource.muted){
audioSource.muted = false;
}else{
audioSource.muted = true;
}
}
function TimeUpdate() {
var audioSource = document.getElementById("myAudio")
var t = Math.floor(audioSource.currentTime);
document.getElementById('CurrentTime').innerHTML = t...
}
~
~
~
ページ名:
