<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<button id='play' onclick="document.getElementById('audio-player').play(); document.getElementById('play').style.display='none'; document.getElementById('pause').style.display='block';">Play</button>
<button id='pause' style='display: none' onclick="document.getElementById('audio-player').pause(); document.getElementsById('pause').style.display='none'; document.getElementsById('play').style.display='block';">Pause</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
the expected response should be that clicking play gets rid of play and shows pause and vice versa (besides this the buttons themselves act as expected)
<script>
function playPause() {
if (document.getElementById('play')) {
if (document.getElementById('play').style.display == 'none') {
document.getElementById('play').style.display = 'block';
document.getElementById('pause').style.display = 'none';
}
else {
document.getElementById('play').style.display = 'none';
document.getElementById('pause').style.display = 'block';
}
}
}
</script>
<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
<div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
well i got it working with a bit of a different approach to the scenario.
putting the buttons in divs.
<script>
function playPause() {
if (document.getElementById('play')) {
if (document.getElementById('play').style.display == 'none') {
document.getElementById('play').style.display = 'block';
document.getElementById('pause').style.display = 'none';
}
else {
document.getElementById('play').style.display = 'none';
document.getElementById('pause').style.display = 'block';
}
}
}
</script>
<audio id='audio-player' controls='controls'>
<source src='sound.wav' type='audio/wav'>
Your browser does not support the audio element,
</audio>
<div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
<div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
<button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>
<br>
well i got it working with a bit of a different approach to the scenario.
putting the buttons in divs.
its not a correct answer according to the question but it is a "correct" answer as to what i was trying to accomplish.
Related
I want to change playback speed for number of audio clips on the same HTML page.
The JS code for changing the speed goes like this:
var vid = document.getElementById("myAudio");
function getPlaySpeed() {
alert(vid.playbackRate);
}
function setPlaySpeed10() {
vid.playbackRate = 1.0;
}
function setPlaySpeed09() {
vid.playbackRate = 0.9;
}
function setPlaySpeed08() {
vid.playbackRate = 0.8;
}
And HTML for audio is this:
<audio id="myAudio" controls src="/home/../../../1-001.mp3"></audio>
<button onclick="getPlaySpeed()" type="button">What's the speed</button>
<button onclick="setPlaySpeed10()" type="button">1</button>
<button onclick="setPlaySpeed09()" type="button">0.9</button>
<button onclick="setPlaySpeed08()" type="button">0.8</button>
<audio id="myAudio" controls src="/home/../../../1-002.mp3"></audio>
<button onclick="getPlaySpeed()" type="button">What's the speed</button>
<button onclick="setPlaySpeed10()" type="button">1</button>
<button onclick="setPlaySpeed09()" type="button">0.9</button>
<button onclick="setPlaySpeed08()" type="button">0.8</button>
So the speed actually changes only for the first element.
I did change the id for the second element to myAudio1 and duplicated the JS code with the myAudio1 and this way both of them work, obviously :) but there should be better way!
Please help :)
Passing the element id as a parameter in your functions will eliminate the need to duplicate your functions. The same thing can be applied to the speed as well.
function getPlaySpeed(elementId) {
var vid = document.getElementById(elementId);
alert(vid.playbackRate);
}
function setPlaySpeed(elementId, speed) {
var vid = document.getElementById(elementId);
vid.playbackRate = speed;
}
<audio id="myAudio-001" controls src="https://audionautix.com/Music/AshesOfAnEmpire.mp3"></audio>
<button onclick="getPlaySpeed('myAudio-001')" type="button">What's the speed</button>
<button onclick="setPlaySpeed('myAudio-001', 1.0)" type="button">1</button>
<button onclick="setPlaySpeed('myAudio-001', 0.9)" type="button">0.9</button>
<button onclick="setPlaySpeed('myAudio-001', 0.8)" type="button">0.8</button>
<audio id="myAudio-002" controls src="https://audionautix.com/Music/Assasins.mp3"></audio>
<button onclick="getPlaySpeed('myAudio-002')" type="button">What's the speed</button>
<button onclick="setPlaySpeed('myAudio-002', 1.0)" type="button">1</button>
<button onclick="setPlaySpeed('myAudio-002', 0.9)" type="button">0.9</button>
<button onclick="setPlaySpeed('myAudio-002', 0.8)" type="button">0.8</button>
Note: replaced the audio files with something accessible so you can test this example live.
As required by license: music by audionautix.com
How can I play audio on button click inside same div using javascript without element id? I want to display the default html player with just a play button. Refer to picture
var audiofile = document.querySelectorAll('div[class$="audio-clip"]');
audiofile.forEach(function(item) {
var btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = "Click to Listen";
btn.setAttribute("type", "button");
btn.addEventListener('click', () => {
item.find('audio').play();
})
item.appendChild(btn);
});
<div class="audio-clip">
<audio preload="none" controls="">
<source src="https://staging.buellairhorns.com/wp-content/uploads/2022/03/Buell-Duplex-Air-Horn-Buell-Airhorns.mp3" type="audio/mpeg">
</audio>
<button class="btn" type="button">Click to Listen</button></div>
var audiofile = document.querySelectorAll('div[class$="audio-clip"]');
audiofile.forEach(function(item) {
var btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = "Click to Listen";
btn.setAttribute("type", "button");
btn.addEventListener('click', () => {
item.getElementsByTagName('audio')[0].play();
})
item.appendChild(btn);
});
<div class="audio-clip">
<audio preload="none" controls="">
<source src="https://staging.buellairhorns.com/wp-content/uploads/2022/03/Buell-Duplex-Air-Horn-Buell-Airhorns.mp3" type="audio/mpeg">
</audio>
<button class="btn" type="button">Click to Listen</button></div>
I would like to show the duration of my video and the actual time.
For this I use HTMLMediaElement API in JS.
Everything is working (play, pause, restart, ...) but the duration and current time aren't working and I don't know why. I dont usually code in JS so please be fine ^^
This is my code :
<div class="wrap_video">
<video id="video" width="298" height="240">
<source src="videos/windowsill.mp4" type="video/mp4">
Désolé, votre navigateur ne vous permet pas de visualiser cette vidéo.
</video>
</div>
<div class="datas">
<span id="currentTime"><script>document.write(currentTime);</script></span>
<span id="duration"><script>document.write(duration);</script></span>
</div>
<div id="buttonbar">
<button id="restart" class="btn btn-default" onclick="restart();">
<span class="glyphicon glyphicon-repeat"></span>
</button>
<button id="rewind" class="btn btn-default" onclick="skip(-10)">
<span class="glyphicon glyphicon-fast-backward"></span><!--<<-->
</button>
<button id="play" class="btn btn-default" onclick="playPause()">
<span class="glyphicon glyphicon-play"></span><!-->-->
</button>
<button id="fastForward" class="btn btn-default" onclick="skip(10)">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
And my JS :
/**
* Play or Pause the video
*/
function playPause() {
var video = document.getElementById("video");
var button = document.getElementById("play");
var currentTime = 0;
currentTime += document.getElementById("video").currentTime;
var duration = document.getElementById("video").duration;
if (video.paused) {
video.play();
button.innerHTML = "<span class=\"glyphicon glyphicon-pause\"></span>";
} else {
video.pause();
button.innerHTML = "<span class=\"glyphicon glyphicon-play\"></span>";
}
}
/**
* Restart the video
*/
function restart() {
var video = document.getElementById("video");
video.currentTime = 0;
}
/**
* Skip the video to the given value
*
* #param int value The value
*/
function skip(value) {
var video = document.getElementById("video");
video.currentTime += value;
}
Actually I just want to show current time and duration
Edit :
Ok so now I have that :
For the current time
setInterval(function() {
document.getElementById("currentTime").innerHTML = document.getElementById("video").currentTime;
}, 1000);
var duration = document.getElementById("video").duration;
document.getElementById("duration").innerHTML = duration;
BUT now my problem is that I have [ObjectHTMLSpanElement] instead of 0:00 and NaN instead of 20:03 ...
I suggest you initialize your js code in a oncanplay function that will be called as soon as the video can play through.
For the time thing, I would set up a separate timer that checks the video time every second and updates it accordingly:
var vid = document.querySelectorAll("video")[0];
var current = document.getElementById("current");
var total = document.getElementById("total");
vid.oncanplay = function() {
vid.ontimeupdate = function() {
current.innerHTML = Math.floor(vid.currentTime) + "s";
total.innerHTML = Math.floor(vid.duration) + "s";
}
}
.wrapper {
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
border: 2px solid black;
background: white;
margin: 0;
padding: 5px;
}
<div class="wrapper">
<video width="400" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Current time: <span id="current"></span><br />
Total time: <span id="total"></span>
</p>
</div>
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
Thanks for stopping by. I'm creating a page to cycle through video clips. The cycling through part (run() function) works just fine. I also created a few buttons to play the specific video clip and these are not working. I've only written the function for the first button and I'll write the other two when I get the first working.
Any help if greatly appreciated.
Thanks,
Tommy
<video id="tutorials" autoplay onended="run()"
autobuffer="true" width="600px" height="350px" controls>
<source src="video1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<br>
<br>
<button id="tut1">Play Tutorial 1</button>
<button id="tut2">Play Tutorial 2</button>
<button id="tut3">Play Tutorial 3</button>
<script type="text/javascript">
video_count =1;
videoPlayer = document.getElementById("tutorials");
function run()
{
video_count++;
if (video_count == 4) return;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
document.getElementByID("tut1").onclick = function()
{
videoPlayer.stop();
videocount = 1;
var video = "video1.mp4";
videoPlayer.src = video;
videoPlayer.play();
}
</script>
I'd prefer to structure the code this way:
<script type="text/javascript">
video_count =1;
videoPlayer = document.getElementById("tutorials");
function runNext()
{
runVideo(video_count+1);
}
function runVideo(number)
{
if (number > 3) return;
video_count = number;
videoPlayer.src = "video"+video_count+".mp4";
videoPlayer.play();
}
</script>
HTML:
<button id="tut1" onclick="runVideo(1);">Play Tutorial 1</button>
<button id="tut2" onclick="runVideo(2);">Play Tutorial 2</button>
<button id="tut3" onclick="runVideo(3);">Play Tutorial 3</button>