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
Related
<button class="button" style="width: 200px;" onclick="playSound()">Play sound</button>
function playSound() {
audio.pause();
var audio = new Audio('V2018-Museum-filer/mp3file.mp3');
audio.play();
}
When clicking the button multiple tiems to start the audio multiple times, i want to stop the audio already playing for it to replay. How can i do this? I get an error saying audio is undefined.
Hope this helps...
When the button is clicked, the audio is paused and restarts on second click.
function playSound() {
var audioControl = document.getElementById('sound');
var btn = $("#player");
if (btn.click && audioControl.paused !== true) {
audioControl.pause();
} else if (btn.click && audioControl.paused === true) {
audioControl.currentTime = 0;
audioControl.play();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="sound" controls>
<source src="http://www.largesound.com/ashborytour/sound/brobob.mp3" type="audio/mpeg">
</audio>
<button id="player" style="width: 200px;" onclick="playSound()">Play sound</button>
<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.
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>
I create two audio players on the same web page.
<audio id="player0">
<button id="play0" /><button id="forward0" />
<button id="backward0" /></audio> <audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>
But when I click "play0", both of them play. I think the problem is I'm binding the eventListener to one playbtn. Can someone tell me how to unbind the eventListener, so I can play just one at a time?
var index = 0;
var playbtn = document.getElementById("play-images-"+index);
var playbtn.addEventListener("click", playPause, false);
index++;
function playPause(){
playbtn = document.getElementById("play"+index);
if(!audio.paused && !audio.ended){
audio.pause();
}else{
audio.play();
}
}
This should be close to what you need...
HTML
<audio id="player0">
<button id="play0" />
<button id="forward0" />
<button id="backward0" />
</audio>
<audio id="player1">
<button id="play1" />
<button id="forward1" /><button id="backward1" />
</audio>
JavaScript
// init page when window loads
window.addEventListener('load', initPage, false);
function initPage() {
// add click event to play buttons
var btnColl = document.getElementsByTagName('button');
for (var i = 0; i < btnColl.length; i++) {
if (btnColl[i].id.indexOf('play')> -1) {
btnColl[i].addEventListener('click', playPause, false);
}
}
}
function playPause(sender) {
// get audio player based on button id
var audioPlayer = document.getElementById(sender.srcElement.id.replace('play', 'player'));
if(!audioPlayer.paused && !audioPlayer.ended){
audioPlayer.pause();
}else{
audioPlayer.play();
}
}
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>