I am new to js so forgive me. I'm using the html5 audio tag with some js to only show play and pause as a button. I would like to change the text for play & pause out with images. Like playbtn.png and pausebtn.png. Here is where I'm stuck.
html:::
<!-- hidden audio player -->
<audio id="audio" controls autoplay hidden="">
<source src="music/eatForTwo.wav" type="audio/wav">
<source src="music/eatForTwo.mp3" type="audio/mpeg">
<p>Your Browser Doesn't Support The HTML5 audio Element</p>
</audio>
<button id="playpause" title="play" onclick="togglePlayPause()" ><img id="imgbtn" src="music/pausebtn.png"/></button>
<!-- javascript for audio control
-->
<script src="code/html5audio.js" type="text/javascript">
</script>
js:::
// Grab a handle to the video
var audio = document.getElementById("audio");
// Turn off the default controls
audio.controls = false;
function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
playpause.title = "pause";
playpause.style.backgroundImage = "url(music\pausebtn.png)";
audio.play();
}
else {
playpause.title = "play";
playpause.style.backgroundImage = "url(music\playbtn.png)";
audio.pause();
}
}
Edit your js as following but you have to change url(c:\folder\img.jpg) to url(yourPath) .... Now yourPath does not mean yourPath it means the location of the image on your hard disk
// Grab a handle to the video
var audio = document.getElementById("audio");
// Turn off the default controls
audio.controls = false;
function togglePlayPause() {
var playpause = document.getElementById("playpause");
if (audio.paused || audio.ended) {
//playpause.title = "pause";
playpause.style.backgroundImage = "url(c:\folder\img.jpg)";
audio.play();
}
else {
//playpause.title = "play";
playpause.style.backgroundImage = "url(c:\img1.jpg)";
audio.pause();
}
Related
I write a JavaScript APP and want to run it on my phone.
I found that JavaScript APP cannot just run in Chrome. So I download a HTML viewer APP. I used below:
https://play.google.com/store/apps/details?id=in.vineetsirohi.htmlreader&hl=zh_HK&gl=US
My code is follow:
<audio id="audio0" src="./audio/0.mp3"></audio>
<audio id="audio1" src="./audio/1.mp3"></audio>
<audio id="audio2" src="./audio/2.mp3"></audio>
<audio id="audio3" src="./audio/3.mp3"></audio>
<audio id="audio4" src="./audio/4.mp3"></audio>
<audio id="audio5" src="./audio/5.mp3"></audio>
<audio id="audio6" src="./audio/6.mp3"></audio>
<audio id="audio7" src="./audio/7.mp3"></audio>
<audio id="audio8" src="./audio/8.mp3"></audio>
<audio id="audio9" src="./audio/9.mp3"></audio>
<audio id="audio10" src="./audio/10.mp3"></audio>
<audio id="audio100" src="./audio/100.mp3"></audio>
<img src='./img/start.png' width='300px' onclick="startFunction()">
<div class="countingnumber" id="countingnumber"></div>
<script>
var count=0;
var speed=4;
var max=100;
function startFunction(){
count=0;
timer1();
}
function timer1(){
var timeout= speed*1000;
if(count<max){
count++;
document.getElementById("countingnumber").innerHTML = count;
play(count);
}
setTimeout(timer1, timeout);
}
function play(input){
var temp=input%10;
if (temp==0) temp=10;
if(input>10){
if(input>=100){
var temp=Math.floor(input/100);
var audio = document.getElementById("audio"+temp);
audio.play();
setTimeout(audio.pause,480);
setTimeout(playaudio, 500,"audio100");
if(input%100>=20){
setTimeout(play, 1000,input%100);
}
else if(input%100>=10){
setTimeout(playaudio, 1000,"audio1");
setTimeout(playaudio, 1500,"audio10");
setTimeout(play, 2000,input%10);
}
else if(input%100>0){
setTimeout(playaudio, 1000,"audio0");
setTimeout(play, 1500,input%10);
}
}
else if(input<20){
var audio = document.getElementById("audio10");
audio.play();
var audio = "audio"+temp;
setTimeout(playaudio, 500,audio);
}
else{
var temp2=Math.floor(input/10);
var audio = "audio"+temp2;
playaudio(audio);
setTimeout(playaudio, 500,"audio10");
if(temp!=0){
var audio = "audio"+temp;
setTimeout(playaudio, 1000,audio);
}
}
}
else{
var audio = document.getElementById("audio"+temp);
audio.play();
}
}
function playaudio(input){
var audio = document.getElementById(input);
audio.play();
setTimeout(audio.pause,480);
}
</script>
(I am a Chinese so my number system is not same as English, it speak like ten-two as twelve and two-ten-two as twenty two)
I expect counting number can be display and play the audio. The numbers can show correctly but the audio usually cannot play after four.
I'm not a professional I do not want to learn using android studio. I just want to use my high school level of HTML and JavaScript to do the task.
I am aware that this question might have been asked here a few times, however I could not find a solution I've been looking for. We have a requirement where the users should be able to pause the video and resume from where they left.
I was able to get to the point where I am able to store and fetch the paused time from local storage, however I have been facing challenges playing the video from the stored value. Below is the code.
<video id="myVideo" width="300" height="300" controls>
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><br />
<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>
<script>
var vid = document.getElementById("myVideo")
function getCurTime() {
return vid.currentTime
}
var isPlaying = false
var PausedTime
function PlayVideo() {
var change = document.getElementById("PlayVideo")
if (isPlaying) {
vid.pause()
//Storing the paused time to local storage
localStorage.setItem('CaptureTime', getCurTime())
//Get the saved time from local storage
PausedTime = localStorage.getItem('CaptureTime')
change.innerHTML = "Play"
}
else {
vid.play()
change.innerHTML = "Pause"
}
isPlaying = !isPlaying
}
</script>
Would appreciate if anyone here could help me out with this.
Please let me know if more details are needed.
You should only get the time when playing, and save on pause. Set the current time to the local storage paused time when being played. Like this:
var vid = document.getElementById("myVideo");
function getCurTime() {
return vid.currentTime;
}
var isPlaying = false;
var PausedTime;
function PlayVideo() {
var change = document.getElementById("PlayVideo");
//Get the saved time from local storage
var PausedTime = localStorage.getItem('CaptureTime');
if (isPlaying) {
vid.pause();
//Storing the paused time to local storage
localStorage.setItem('CaptureTime', getCurTime());
change.innerHTML = "Play";
}
else {
vid.currentTime = PausedTime;
vid.play();
change.innerHTML = "Pause";
}
isPlaying = !isPlaying;
}
<video id="myVideo" width="300" height="300" controls>
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><br/>
<button onclick="PlayVideo()" type="button" id="PlayVideo">Play</button>
To pause and play a video in javascript you don't actually need to save the time to local storage.
That being said, if you still want to do it that way, you would just need to remember these lines:
localStorage.setItem('CaptureTime', getCurTime());
PausedTime = localStorage.getItem('CaptureTime');
vid.currentTime = PausedTime;
for reference
In addition, when I tried your code it wouldn't change the play to pause, so I made a few adjustments.
This is how I implemented it all:
<html>
<body>
<button id="controls" onclick="play()" type="button">Play Video</button><br>
<video id="myVideo" width="320" height="176">
<source src="Bunny.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
var isPlaying = false; //or this could be: var isPaused = vid.paused;
function play() {
if(!isPlaying){
vid.play();
document.getElementById("controls").innerHTML = "Pause Video";
}
else{
vid.pause();
document.getElementById("controls").innerHTML = "Play Video";
}
isPlaying = !isPlaying;
}
</script>
</body>
</html>
Check out these pages for more:
https://www.w3schools.com/js/js_htmldom_html.asp
https://www.w3schools.com/tags/av_met_play.asp
https://www.w3schools.com/html/html5_video.asp
I have a few images on my page and when I hover over them they should each play a certain sound. Also, I don't want audio players to be visible.
I tried this but it only works when I click on audio player before hovering image:
HTML
<img src = "Pkokoska.jpg" onmouseover="playSound1()">
<img src = "Pkonj.jpg" onmouseover="playSound2()">
<audio controls id="audio1"><source src="Zkokoska.wav" type="audio/wav"></audio>
<audio controls id="audio2"><source src="Zkonj.wav" type="audio/wav"></audio>
JavaScript
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound1.play();
}
function playSound2() {
sound2.play();
}
You have to add controls attribute in the audio tag to activate the controlling functions such as play , plause ,etc.. for that element
<audio controls id="abc> ... </audio>
You can also hide the controls tab by ussing css property dsiplay:none
var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
function playSound1() {
sound2.pause();
sound2.currentTime = 0;
sound1.play();
}
function playSound2() {
sound1.pause();
sound1.currentTime = 0;
sound2.play();
}
audio{
display:none;
}
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound1()">
<audio id="audio1" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>
<img src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" onmouseover="playSound2()">
<audio id="audio2" controls><source src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3" type="audio/wav"></audio>
I don't know if this will work on pure javascript but am sure it will with JQuery
function playSound1() {
sound1.trigger('play');
}
function playSound2() {
sound2.trigger('play');
}
I have a JS function that changes the video source of an HTML video. A button activates this function. It loads the same new video on switch. There are 2 videos of the same length.
How do I:
interchange the video every time I click the button?
when i click the button, can the video load at the same time the previous video was playing?
HTML:
<button onclick="myFunction()" type="button">Change Video</button><br>
<video id="myVideo" controls autoplay>
<source id="mp4_src" src="video1.mp4" type="video/mp4">
<source id="mp4_src" src="video2.mp4">
</video>
JS
var vid = document.getElementById("myVideo");
function myFunction() {
vid.src = "video2.mp4";
vid.load();
}
Here is the fiddle that solves both of your problems, http://jsfiddle.net/egjyd9rs/5/
Basically, the toggle function which takes care of both is as below,
function myFunction() {
currentlPlayingTime = vid.currentTime;
if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
statusElement.innerText = 'Going to play video2..';
} else {
vid.src = src1;
currentlyPlaying = 1;
statusElement.innerText = 'Going to play video1..';
}
vid.load();
vid.addEventListener('loadedmetadata', function () {
vid.currentTime = currentlPlayingTime;
}, false);
}
I'm trying to play sound effect in a game with each hit,but the sound sometimes play and others NOT !!
I'm using the next code :
<script>
var hitSound = new Audio();
function playEffectSound()
{
hitSound = document.getElementById('effects');
hitSound.loop = false;
hitSound.currentTime = 0;
hitSound.play();
}
</script>
<audio id="effects" hidden>
<source src="sound/mp3/effect.mp3" type="audio/mpeg">
<source src="sound/wav/effect.wav" type="audio/wav">
</audio>
any ideas ?
Whenever you are using audio tag try writing its script after audio tag ,If you write script before that audio tag it gives sometime problem in playing the audio,
i would recommend Write Script at the end of the page that's the standard way to write script.
http://jsfiddle.net/LyDWH/4/
<!DOCTYPE html>
<html>
<body>
<audio id="effects" hidden >
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<div onclick= "playEffectSound();">Horse Click Me..!</div>
</body>
<script>
var hitSound = new Audio();
function playEffectSound()
{
hitSound = document.getElementById('effects');
hitSound.currentTime = 0;
hitSound.play();
}
</script>
</html>
You could use the following code to play audio
function playEffectSound(sound) {
//Does the sound already exist?
if (document.getElementById(sound) != null) {
document.getElementById(sound).play();
return;
}
//Create elements
var audioElement = document.createElement("audio");
var sourceElement = document.createElement("source");
sourceElement.src = sound + ".mp3";
sourceElement.type = "audio/mpeg";
var sourceElementWave = document.createElement("source");
sourceElementWave.src = sound + ".wav";
sourceElementWave.type = "audio/wav";
//Add sources to audio
document.body.appendChild(sourceElementWave);
document.body.appendChild(audioElement);
audioElement.setAttribute("id", sound);
audioElement.appendChild(sourceElement);
audioElement.loop = false;
audioElement.currentTime = 0;
audioElement.play();
}
You can use it like this: playEffectSound("sounds/effect"); and it will either play sounds/effect.mp3 or sounds/effect.wav
try with each hit to add a new var sound and sound.play() and it will just work fine