So I have my code here, and it works great. Only thing is there are no mute/unmute buttons and I have no idea how to add them.
<audio src="MUSIC URL" autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
I use this, get a play and pause button .png and use them. Then make a folder called audio and put the files in there for you music. I put the play and pause in a folder called images.
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
<audio controls loop>
<source src="**your website url here**/audio/waves.ogg" type="audio/ogg">
<source src="**your website url here**/audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
snd = document.getElementsByTagName('audio')[0],
ctrl = document.getElementById('pauseplay');
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';}
ctrl.addEventListener('click', function(){
if(playing){
snd.pause();
} else {
snd.play();
}
playing = !playing;
ctrl.title = playing? 'Pause' : 'Play';
ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png';
}, false);
})();
</script>
If you want to see it live look at this site I made.
You should add controls attribute to audio tag.
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
developer.mozilla
<audio src="http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9" controls>
<p>Your browser does not support the audio element </p>
</audio>
Very easy:
<button onclick="document.getElementsByTagName('audio')[0].play();">Sound on</button>
<button onclick="document.getElementsByTagName('audio')[0].pause();">Sound off</button>
<audio autoplay preload="auto" loop src="your.mp3"></audio>
It is set on autoplay and loop, you can pause and resume by clicking the buttons. The best way to avoid diplaying the unsuitable browser player.
Related
I am using audio tag to play a wav audio, My url is genereted by URL.createObjectURL() and the url is like blob:http://localhost/9fa2ef06-ade6-4027-89f8-06cd2c176405
As the url has no extension, I have some issue with safari
The following code is works on chrome and not works on safari(Audio player is disabled)
<audio src="MY_BLOB_URL" type="audio/wav">
</audio>
The following code is works on safari and not works on chrome
<audio controls>
<source src="MY_BLOB_URL" type="audio/wav">
</audio>
I tried weird codes like the following and cannot find any way to works on both browsers
<audio src="MY_BLOB_URL" type="audio/wav">
<source src="MY_BLOB_URL" type="audio/wav">
</audio>
What's wrong here? And how can I have a cross-browser HTML5 audio player with single code?
I've tested the following code on Windows PC using Chrome, Edge & Firefox.
Let's hope it also works on Safari.
PS: For future readers, this code would also work with an MP3 blob (set as accept=".mp3").
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 100px; left: 50px">
<audio id="tag_Audio1" controls>
<source type="audio/wav">
</audio>
</div>
<br><br><br><br>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 50px">
<p> Choose an WAV file...</p>
<input type="file" id="choose_media" accept=".wav" />
</div>
<script>
var file; var reader;
var tmpElement; //# is reference to aTag for holding image content.
var file_Blob; //# is reference to file BLOB (data of selected file).
const myAudio = document.getElementById("tag_Audio1");
document.getElementById("choose_media").addEventListener("change", onFile_Selected, false);
function onFile_Selected(evt)
{
file = evt.target.files[0]; //# access to selected file
reader = new FileReader();
reader.readAsDataURL(file); //# load selected file as Blob
reader.addEventListener("loadend", onFile_Loaded, false);
}
function onFile_Loaded(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
//# remove any current SRC
myAudio.removeAttribute("src");
//# create blob
file_Blob = (window.URL || window.webkitURL).createObjectURL(file);
//# apply blob & test play
myAudio.setAttribute("src", file_Blob);
myAudio.load();
myAudio.play();
}
}
</script>
</body>
</html>
I was wondering if this is possible :
I have a movie with a Play button.
After click, the movie begins to play.
When the movie finish, I have a picture which cover my movie div.
Which options to use in my function:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// now the video has to hide, and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
There are various options, including replacing the <video> tag with an <image> tag.
The easiest one I can think of is to have the image on a layer under the video, then when the video finishes, you can change layers (put image as the front layer and now video in the back layer).
When image is under the video, it has same size and position so to end-user it's invisible. This is set through the <style=> part where z-index is the layer position (higher number puts it above others of a lower number). The top and left options are the positions of up/down and left/right settings.
You can try using: (in the code below, I change their positions (not aligned) so you can see what is happening)...
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
<source src="some_video.mp4" type="video/mp4">
</video>
<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
<img src="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');
function myHandler(e)
{
// now the video has to hide, and show the img:
//video.style.display = "none:
//img.style.display = "block"
//# swap their layer positioning
img.style.zIndex = "2"; //# makes top
video.style.zIndex = "1"; //# makes bottom
}
</script>
</body>
</html>
I'm not sure if there's something else to it other than simply showing an image when the video is not playing, if that's not the case, the video tag has a poster attribute:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I need a sample code for click to play music I am getting all of my mp3 files from my system folder and I would like to play that pieces of music.
My code like this
mp3name
mp3name1
mp3name2
mp3name3
How I should go about this using JavaScript?
You can use audio tag to play the audio, and if you want to pause one audio if another audio file is played here is a simple javascript code
check what are the elements playing right now and pause the audio which is currently playing.
Read more about audio tag from MDN
document.addEventListener('play', function(element){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len; i++){
if(audios[i] != element.target){
audios[i].pause();
}
}
}, true);
document.addEventListener('play', function(element){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len; i++){
if(audios[i] != element.target){
// console.log("audio paused");
audios[i].pause();
}
}
}, true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
Play 1
Play 2
Play 3
Play 4
</div>
<audio
id="p1"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p2"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p3"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p4"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
<audio
id="p5"
src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3">
Your browser does not support the <code>audio</code> element.
</audio>
</body>
</html>
Source: multiple audio html : auto stop other when current is playing with javascript
You can use embed tag to play audio files
html
<embed src="mp3folder/mp3name.mp3" autostart="false" id="mp3name" enablejavascript="yes">
javascript
var mp3name = document.getElementById("mp3name");
mp3name.play();
I have a few lines of Javascript that define a custom 'play' button for HTML5 video.
The issue I have is that they work fine for one video, and for one video only. I want to have several videos on my page with the same Javascipt code affecting all of them. So that the play button works individually on each video. At the moment it only works on the first video listed in HTML.
How do I make this work?
JS
var vid, playbtn;
function intializePLayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
playbtn.addEventListener("click",playPause,false);
}
window.onload = intializePLayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.opacity = '0';
}else{
vid.pause();
playbtn.style.background = "url('http://i61.tinypic.com/xm8qdu.png')";
playbtn.style.backgroundSize = "105px 105px";
playbtn.style.opacity = '1';
}
}
CSS
#video_container{
position:relative;
width:480px;
height:264px;
}
button#playpausebtn{
background:url('http://i61.tinypic.com/xm8qdu.png') no-repeat;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
border:none;
outline:none;
width:105px;
height:105px;
cursor:pointer;
background-size: 105px 105px;
}
HTML
<!-- Video #1 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #2 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This approach will help you have one->n videos. In the fiddle we first search the DOM for elements with a class name of playpausebtn, then add an onclick listener for each. This listener takes the video object (which has to be directly after the button in this case, you could change this code to use an incrementing id e.g. video_1, video_2 etc and find the video objects that way) and adds it to the onclick event listener.
This is only one approach, but it is a way to resolve your issues - please ask questions if there is anything you don't understand.
http://jsfiddle.net/tL5ZU/1/
HTML:
<!-- Video #1 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
<!-- Video #2 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
JS
//set up listeners for buttons
function init() {
//get all buttons
var buttons = document.getElementsByClassName('playpausebtn');
//for each button set up the onclick listener
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = (function () {
//the video needs to be right after the button
var video = buttons[i].nextSibling.nextSibling;
return function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
})();
}
}
init();
,Hi,
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
I try to use html5 video from below website
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
How can i play/pause video on video screen click ?
Any help will be appreciated.
Thanks.
Simply you can call the function video on click
<video id="video1" onClick="playPause();">
...
</video>
The shortest way
onclick="this[this.paused ? 'play' : 'pause']()"
The right (but still short) way
...considering you already have your video in variable,you should generally use event listeners and not hard coded onX attributes...(even if you have callback!)
var myVideo = document.getElementById("video1");
myVideo.addEventListener('click', function(e){
e.preventDefault();
this[this.paused ? 'play' : 'pause']();
});
PS: If you are wondering how the hack does the play/pause line work - it is based on the fact that in JavaScript, methods/object functions are basically callable properties of that object and also that in JavaScript, you can reference property directly someObj.someProperty but also through value or variable like someObj["someProperty"] , var prop = "someProperty"; someObj[prop];
... so a long equivalent of the one-liner would be
if (this.paused) {
this.play();
} else {
this.pause();
}