I'm trying to build an html5/javascript mp3 player on my webpage but the site is playing no sound. I have the song in the root directory with my index.html file. Why is it when I hit play on the mp3 file, it doesn't play?
Heres my code:
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="music.js"></script>
<script>
var player;
var intv;
var slider;
window.onload = function () {
document.getElementById('btnPlay').addEventListener('click', playMusic, false);
document.getElementById('btnPause').addEventListener('click', btnPause, false);
document.getElementById('btnStop').addEventListener('click', btnStop, false);
document.getElementById('btnVolUp').addEventListener('click', , false);
document.getElementById('btnVolDown').addEventListener('click', volDown, false);
player = document.getElementById('player');
slider = document.getElementById('sliderTime');
slider.addEventListener('change', reposition, false);
getMusicList();
}
function reposition() {
player.currentTime = slider.value;
}
//Volume Controls
function volUp() {
if (player.volume < 1) {
player.volume += 0.1;
console.log(player.volume);
} else {
player.volume = 1;
}
}
function volDown() {
if (player.volume > 0) {
player.volume -= 0.1;
console.log(player.volume);
} else {
player.volume = 0;
}
}
//MUSIC PLAY CONTROLS
function playMusic() {
player.play();
intv = setInterval(update, 100);
slider.max = player.duration;
}
function update() {
document.getElementById('songTime').innerHTML = millisToMins(player.currentTime);
slider.value = player.currentTime;
}
function millisToMins(seconds) {
var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
if (numseconds >= 10) {
return "Time Elapsed: " + numminutes + ":" + Math.round(numseconds);
} else {
return "Time Elapsed:" + numminutes + ":0: + Math.round(numseconds);
}
}
function pauseMusic(){
player.pause();
clearInterval(intv);l
}
function stopMusic(){
player.pause();
player.currentTime = 0;
clearInterval(intv);
}
function getMusicList(){
var parser = new DOMParser();
xmlDocument = parser.parseFromString(xml, "
text / xml ");
var elementsArray = xmlDocument.documentElement.getElementsByTagName('composition');
var arrayLength = elementsArray.length;
var output = " < table > ";
for (var i = 0; i < arrayLength, i++){
var title = elementsArray[i].getElementsByTagName('title'[0].firstChild.nodeValue;
var composer = elementsArray[i].getElementsByTagName('composer')[0].firstChild.nodeValue;
var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
output += " < tr > ";
output += (" < td onclick = 'songSelect(\"" + fileName + "\")' > " + title + "
By: " + composer + " < /td>");
output += "</table > ";
document.getElementById('musicList').innerHTML = output;
}
function songSelect(fn){
//console.log(fn);
document.getElementById('player').src = fn;
playMusic();
}
</script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<div id="logo2">
<div class="col-md-4">
<div ng-controller="logOut">
<div id="logOut1">
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Logout
</button>
</div>
</div>
</div>
</div>
<script>
angular.module('myModule', ['ui.bootstrap']);
</script>
<script src="angular.min.js"></script>
<div id="content2">
<div id="audioPlayer">
<audio id="player">
<source src="SleepAway.mp3" />
<source src="SleepAway.ogg" />
</audio>
<button id="btnPlay">Play</button>
<button id="btnPause">Pause</button>
<button id="btnStop">Stop</button>
<button id="btnVolUp">Volume Up</button>
<button id="btnVolDown">Volume Down</button>
<span id="songTime"></span>
<br/>
<input id="sliderTime" type="range" min="0" value="0" />
<div id="musicList"></div>
</div>
</body>
</html>
main.js
<script type="text/javascript">
var audio = document.getElementById("player"),
play = document.getElementById("play"),
timer = document.getElementById("timer"),
update;
audio.addEventListener("click, PlayAudio, false);
play.addEventListener("
click, PlayAudio, false);
//play or pause audio
functon PlayAudio(e) {
e.preventDefault();
if (audio.paused) {
audio.play();
play.textContent = "Pause";
} else {
audio.pause();
play.textContent = "Play";
}
}
document.write("Hello World!");
</script>
var player = document.createElement('audio');
player.src = 'your_source_here.mp3';
player.controls = true;
document.body.appendChild(player);
Related
I have a problem. I am currently working on an project that changes image pixels. I am doing it as a web app using javascript. The problem is that when I change them using getImageData and then downloads the picture with toDataURL and link download it works. But when I then upload the image and read data with getInamgeData some of the pixels change.
Where can be the problem and how can I fix it.
const original_canvas = document.getElementById('original_canvas');
const edited_canvas = document.getElementById('edited_canvas');
const orig_ctx = original_canvas.getContext('2d');
const edit_ctx = edited_canvas.getContext('2d');
var start = document.getElementById("start");
var textfield = document.getElementById("textField");
var message = "";
var download = document.getElementById("download");
var loadFile = function(event){ //
var uploaded_image = new Image();
uploaded_image.src = URL.createObjectURL(event.target.files[0]); //
uploaded_image.onload = function (){ //resizes canvas and image after its loaded
//original_canvas.width = 400;
//original_canvas.height = uploaded_image.height/(uploaded_image.width/400);
//orig_ctx.drawImage(uploaded_image,0,0,original_canvas.width,original_canvas.height); //draws resized image into canvas
//toto rozostruje obrazok
original_canvas.width = uploaded_image.width;
original_canvas.height = uploaded_image.height;
orig_ctx.drawImage(uploaded_image,0,0);
};
};
function toBinary(input){ //converts text to binary
var output = "5";
for(i = 0; i < input.length; i++){
output += input[i].charCodeAt(0).toString(2) + "2"; //first to ASCI code then to binary
}
output += "5";
return output
}
function toText(input){ //converts binary to text
var output = "";
var binary = "";
for(i = 0; i < input.length; i++){
if(input[i] == "2"){ //divides string by spaces
asci = parseInt(binary, 2); //binary to ASCI code
output += String.fromCharCode(asci); //ASCI code to char
console.log(asci);
binary = "";
}
else{
binary += input[i];
}
}
return output;
}
function closest_point(number, change){ //finds number ending in 1 or 0 and changes it to it
var result = 0; //this should help reduce the vissible changes
function up(){
result = (((number-number%10)/10)+1)*10+change;
return result;
}
function down(){
result = number-number%10+change;
return result;
}
if(Math.abs(number-up()) < Math.abs(number-down()) && up()<255){
return up();
}
else{
return down();
}
}
function encode(){
message = toBinary(textfield.value);
console.log(message);
let imgData = orig_ctx.getImageData(0, 0, original_canvas.width,original_canvas.height);
if(message.length > imgData.data.length){
alert("Message is too big.");
}
else{
for (i = 0; i < imgData.data.length; i += 4){
if(i >= message.length){
break;
}
else{
imgData.data[i] = closest_point(imgData.data[i],Number(message[i]));
imgData.data[i+1] = closest_point(imgData.data[i+1],Number(message[i+1]));
imgData.data[i+2] = closest_point(imgData.data[i+2],Number(message[i+2]));
imgData.data[i+3] = closest_point(imgData.data[i+3],Number(message[i+3]));
}
}
console.log(imgData);
edited_canvas.width = imgData.width;
edited_canvas.height = imgData.height;
edit_ctx.putImageData(imgData, 0, 0);
var jpg = edited_canvas.toDataURL('image/png', 1.0);
console.log(jpg);
download.href = jpg;
}
}
function decode(){
message="";
counter = 0;
let imgData = orig_ctx.getImageData(0, 0, original_canvas.width,original_canvas.height);
console.log(imgData);
for(i=0; i < imgData.data.length;i+=4){
if(imgData.data[i]%10 == 5){
counter += 1;
}
if(counter == 1){
message += (imgData.data[i]%10).toString();
message += (imgData.data[i+1]%10).toString();
message += (imgData.data[i+2]%10).toString();
message += (imgData.data[i+3]%10).toString();
}
if(counter == 2){
message = message.substring(1);
if(message.includes("5")==true){
message = message.substring(0,message.indexOf('5'));
}
console.log(message);
break;
}
}
console.log(toText(message));
}
function main(){
encode_check = document.getElementById("encode_check");
decode_check = document.getElementById("decode_check");
if(decode_check.checked == true){
decode();
}
else{
if(encode_check.checked == true){
encode();
}
else{
alert("Fill everyhing");
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Steganography</title>
</head>
<body>
<div style="position:relative; left:50px; top:10px;">
<input type="text" id="textField" placeholder="O polnoci na vrsku">
<button id="start" onclick="main()">Start</button>
<a href="" id="download" download>Download</a>
<input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)">
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="decode_check">
<label class="form-check-label" for="flexRadioDefault1">
Decode
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="encode_check">
<label class="form-check-label" for="flexRadioDefault2">
Encode
</label>
</div>
</div>
<canvas id="original_canvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="edited_canvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>
I managed to fix it. The problem was that the pixels changed only when the forth value changed- the alpha channel. I suppose it is caused by gamma correction of the web browser.
I want to compare the recent user pattern("userPattern") with the randomly generated pattern("gamePattern").and if userPattern eual to gamepattern I want to enter into next level.
Ho to do that? now I have done up to responding to the user's click.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<h1>Press A Key To Start</h1>
<main>
<button type="button" id="green" class="green box"></button>
<button type="button" id="red" class="red box"></button>
<button type="button" id="yellow" class="yellow box"></button>
<button type="button" id="blue" class="blue box"></button>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
My JS code:
var color = ["green", "red", "yellow", "blue"];
var gamePattern = [];
var userPattern = [];
var level = 0;
function newSequence() {
var randomNumber = Math.floor(Math.random() * 4);
var colorChosen = color[randomNumber];
var audio = new Audio("sounds/" + colorChosen + ".mp3");
audio.play();
$("#" + colorChosen)
.fadeOut(250)
.fadeIn(250);
gamePattern.push(colorChosen);
$("h1").text("Level " + level);
level++;
var userColorChosen;
for (var i = 0; i < $("button").length; i++) {
$("#" + color[i]).click(function () {
userColorChosen = this.id;
userPattern.push(userColorChosen);
var audio = new Audio("sounds/" + userColorChosen + ".mp3");
audio.play();
$("#" + userColorChosen)
.fadeOut(100)
.fadeIn(100);
});
}
}
var call = true;
$(document).keypress(function () {
if (call === true) {
newSequence();
}
call = false;
});
Please help me.
My answer using Jquery for Simon Game:
var color = ["green", "red", "yellow", "blue"];
var gamePattern = [];
var userPattern = [];
var level = 0;
$("button").click(function () {
var userColorChosen = $(this).attr("id");
userPattern.push(userColorChosen);
var audio = new Audio("sounds/" + userColorChosen + ".mp3");
audio.play();
$("#" + userColorChosen)
.fadeOut(100)
.fadeIn(100);
checkAnswer(userPattern.length - 1);
});
function checkAnswer(currentLevel) {
if (userPattern[currentLevel] === gamePattern[currentLevel]) {
if (userPattern.length === gamePattern.length) {
setTimeout(function () {
newSequence();
}, 1000);
}
} else {
$("h1").text("GAMEOVER");
var audio = new Audio("sounds/wrong.mp3");
audio.play();
$("body").addClass("gameover");
setTimeout(function () {
$("body").removeClass("gameover");
}, 100);
startOver();
}
}
function newSequence() {
userPattern = [];
level++;
$("h1").text("Level " + level);
var randomNumber = Math.floor(Math.random() * 4);
var colorChosen = color[randomNumber];
gamePattern.push(colorChosen);
var audio = new Audio("sounds/" + colorChosen + ".mp3");
audio.play();
$("#" + colorChosen)
.fadeOut(250)
.fadeIn(250);
}
var call = true;
$(document).keypress(function () {
if (call === true) {
newSequence();
call = false;
}
});
function startOver() {
level = 0;
gamePattern = [];
call = true;
}
<html>
<head>
<style>
</style>
</head>
<body>
<label id="minutes">0</label>
<label id="seconds">0</label>
<script type="text/javascript">
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 150);
function setTime()
{
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds%10);
}
function pad(val)
{
var valString = val + "";
if(valString.length < 1)
{
return "0" + valString;
}
else
{
return valString;
}
}
</script>
<script type="text/javascript">
var minutesLabel = document.getElementById("minutes");
var totalSeconds = 0;
setInterval(setTime, 100);
function setTime()
{
minutesLabel.innerHTML = pad(totalSeconds%6);
}
function pad(val)
{
var valString = val + "";
if(valString.length < 1)
{
return "0" + valString;
}
else
{
return valString;
}
}
</script>
<script>
function myFunction1() {
var a = document.getElementById("minutes");
var b = document.getElementById("seconds");
dont' know what should i write in here
</script>
<button onclick="myFuntion1">click</button>
</body>
<html>
i wanna make stop button in specific number.
so whenever you clicked the button
the countup stop on 15.
any help will be so appreciated. :)
thanks
--repeat cause it said i can't upload this question because of not enough detail.
i wanna make stop button in specific number.
so whenever you clicked the button
the countup stop on 15.
any help will be so appreciated. :)
thanks
Print out the 1 and 5.
Stop the timer. (You should assign a variable to each timer first)
<html>
<head>
<style>
</style>
</head>
<body>
<label id="minutes">0</label>
<label id="seconds">0</label>
<script type="text/javascript">
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
var t1 = setInterval(setTime, 150);
function setTime()
{
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds%10);
}
function pad(val)
{
var valString = val + "";
if(valString.length < 1)
{
return "0" + valString;
}
else
{
return valString;
}
}
</script>
<script type="text/javascript">
var minutesLabel = document.getElementById("minutes");
var totalSeconds = 0;
var t2 = setInterval(setTime, 100);
function setTime()
{
minutesLabel.innerHTML = pad(totalSeconds%6);
}
function pad(val)
{
var valString = val + "";
if(valString.length < 1)
{
return "0" + valString;
}
else
{
return valString;
}
}
</script>
<script>
function myFunction1() {
document.getElementById("minutes").innerHTML = '1';
document.getElementById("seconds").innerHTML = '5';
clearInterval(t1);
clearInterval(t2);
}
</script>
<button onclick="myFunction1()">click</button>
</body>
<html>
I have a personal time keeper I am putting together for work. We are allotted 50 minutes a week, and I wanted to make a fancy way of keeping track of that time.
I have a method that works:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#example1 {
background-color="#0CD6C7";
}
</style>
<div id="example2">
<meta charset="utf-8" />
<title> Personal Timer</title>
<script type="text/javascript">
function setTimes(info) {
var sel = info.split('|');
document.getElementById('time1').value = sel[0];
document.getElementById('time2').value = sel[1];
}
</script>
</head>
<body bgcolor="#0CD6C7">
<div id="example1">
<hr align="left" size="0.5" color="white" width="82%">
<br>
<font face="arial">
<input id="time1" value="50:00" size="5"> 50 minutes of personal time per week <br>
<input id="time2" value="ex: 2:36" onfocus="this.value=''" size="5"> Type in the length of your personal break<br>
<button onclick="document.getElementById('time1').value = timeAddSub('time1','time2',false)">Enter</button>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?273699-add-2-fields-containing-time-values-in-hh-mm-format&daysprune=30
Number.prototype.padDigit = function() { return (this < 10) ? '0'+this : ''+this; }
function timeAddSub(id1, id2, flag) { // flag=true to add values and flag=false to subtract values
var tt1 = document.getElementById(id1).value; if (tt1 == '') { return ''; }
var t1 = tt1.split(':');
var tt2 = document.getElementById(id2).value; if (tt2 == '') { return ''; }
var t2 = tt2.split(':');
tt1 = Number(t1[0])*60+Number(t1[1]);
tt2 = Number(t2[0])*60+Number(t2[1]);
var diff = 0; if (flag) { diff = tt1 + tt2; } else { diff = tt1 - tt2; }
t1[0] = Math.abs(Math.floor(parseInt(diff / 60))).padDigit(); // form hours
t1[1] = Math.abs(diff % 60).padDigit(); // form minutes
var tt1 = ''; if (diff < 0) { tt1 = '-'; }
// check for negative value
return document.getElementById("time1").innerHTML = tt1+t1.join(':');
}
</script>
</font>
</body>
</div>
</html>
Enter in the length of the break in the second input field and that time is subtracted from the total.
To make it look fancier, I want the total time to appear as only text, not as an input field.
This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<div id="example2">
<meta charset="utf-8" />
<title> Personal Timer</title>
<script type="text/javascript">
function setTimes(info) {
var sel = info.split('|');
document.getElementById('time1').innerHTML = sel[0];
document.getElementById('time2').value = sel[1];
}
</script>
</head>
<body bgcolor="#0CD6C7">
<div id="example1">
<hr align="left" size="0.5" color="white" width="82%">
<br>
<font size="60" face="verdana" color="white">
<p id="time1"><font size="80"><b>50:00</b></p>
<font size="3" face="verdana">
<input id="time2" value="ex: 2:36" onfocus="this.value=''" size="5"> Type in the length of your break<br>
<button onclick="document.getElementById('time1').value = timeAddSub('time1', 'time2', false)">Enter</button>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?273699-add-2-fields-containing-time-values-in-hh-mm-format&daysprune=30
Number.prototype.padDigit = function() {
return (this < 10) ? '0'+this : ''+this;
}
function timeAddSub(id1, id2, flag) { // flag=true to add values and flag=false to subtract values
var tt1 = document.getElementById(id1).value; if (tt1 == '') { return ''; }
var t1 = tt1.split(':');
var tt2 = document.getElementById(id2).value; if (tt2 == '') { return ''; }
var t2 = tt2.split(':');
tt1 = Number(t1[0])*60+Number(t1[1]);
tt2 = Number(t2[0])*60+Number(t2[1]);
var diff = 0; if (flag) { diff = tt1 + tt2; } else { diff = tt1 - tt2; }
t1[1] = Math.abs(diff % 60).padDigit(); // form minutes
t1[0] = Math.abs(Math.floor(parseInt(diff / 60))).padDigit(); // form hours
var tt1 = ''; if (diff < 0) { tt1 = '-'; }
// check for negative value
return document.getElementById("time1").innerHTML = tt1+t1.join(':');
}
</script>
</font>
</body>
</div>
</html>
I know I need to use innerHTML, but it's just not quite clicking. Any pointers in the right direction would be much appreciated!
Change the below line
var tt1 = document.getElementById(id1).value;
to
var p = document.getElementById(id1);
var tt1 = p.textContent;
This is because, value function is applicable only to input tags. For the other plain text tags like p, headings, etc. textContent should be fetched.
What wrong is since t1 is a p tag, it doesn't have value so tt1.split(':'); will throw an exception. Use innerText instead.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<div id="example2">
<meta charset="utf-8" />
<title> Personal Timer</title>
<script type="text/javascript">
function setTimes(info) {
var sel = info.split('|');
document.getElementById('time1').innerHTML = sel[0];
document.getElementById('time2').value = sel[1];
}
</script>
</head>
<body bgcolor="#0CD6C7">
<div id="example1">
<hr align="left" size="0.5" color="white" width="82%">
<br>
<font size="60" face="verdana" color="white">
<p id="time1"><font size="80"><b>50:00</b></p>
<font size="3" face="verdana">
<input id="time2" value="ex: 2:36" onfocus="this.value=''" size="5"> Type in the length of your break<br>
<button onclick="document.getElementById('time1').value = timeAddSub('time1', 'time2', false)">Enter</button>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?273699-add-2-fields-containing-time-values-in-hh-mm-format&daysprune=30
Number.prototype.padDigit = function() {
return (this < 10) ? '0'+this : ''+this;
}
function timeAddSub(id1, id2, flag) { // flag=true to add values and flag=false to subtract values
var tt1 = document.getElementById(id1).innerText;
if (tt1 == '') { return ''; }
var t1 = tt1.split(':');
var tt2 = document.getElementById(id2).value; if (tt2 == '') { return ''; }
var t2 = tt2.split(':');
tt1 = Number(t1[0])*60+Number(t1[1]);
tt2 = Number(t2[0])*60+Number(t2[1]);
var diff = 0;
if (flag) { diff = tt1 + tt2; } else { diff = tt1 - tt2; }
t1[1] = Math.abs(diff % 60).padDigit(); // form minutes
t1[0] = Math.abs(Math.floor(parseInt(diff / 60))).padDigit(); // form hours
var tt1 = ''; if (diff < 0) { tt1 = '-'; }
// check for negative value
return document.getElementById("time1").innerHTML = tt1+t1.join(':');
}
</script>
</font>
</body>
</div>
</html>
i am working on webapp. In this webapp i want add a seek bar, volume, current time/total time,play/pause, and a timer (time should start when the video is playing and should pause, video is paused)
in this webapp i just want to calculate the total number to sec. video is played by user.
thank you in advance.
<html>
<body>
<div style="text-align:center">
<div id="video_player_box">
<video id="my_video" width="550" height="300" onclick="playPause(this,'my_video')">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this,'my_video')">Play</button>
</div>
</div>
</div>
<p id="demo"></p>
<form id="watch">
<p> TIME: <input type="text" id="txt" readonly></p>
<p>COST: <input type="text" id="cost" readonly></p>
As 0.9rs/sec
</form>
<script>
var str = "Hello World!";
var result;
var c = 0;
var co = 0;
var t;
var timer_is_on = 0;
function playPause(btn, vid) {
var vid = document.getElementById(vid);
if (vid.paused) {
vid.play();
btn.innerHTML = "Pause";
result = str.fontcolor("green");
document.getElementById("demo").innerHTML = result;
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
} else {
result = str.fontcolor("red");
document.getElementById("demo").innerHTML = result;
vid.pause();
btn.innerHTML = "Play";
clearTimeout(t);
timer_is_on = 0;
myVideo.pause();
}
}
function timedCount() {
document.getElementById('txt').value = c;
document.getElementById('cost').value = co;
c = c + 1;
co = c * 0.9;
t = setTimeout("timedCount()", 1000);
if (vid.ended) {
clearTimeout(t);
timer_is_on = 0;
}
}
</script>
</body>
</html>