i have written some simple html and javascript that should play a sound file. The page displays the two buttons but when i click the play button it does nothing . I know that my browser can play my mp3 file because it works with just the audio tag ex:
<audio src="soundtest.mp3" ></audio>
If anyone could tell me what i am doing wrong i would greatly appreciate it.
<!DOCTYPE html>
<html>
<body>
<button onclick="playSong()" type="button">play</button>
<button onclick="pauseSong()" type="button">pause</button>
<br>
<audio id="audio1">
<source src="soundtest.mp3" type="audio/mp3" >
Your browser does not support the audio tag!
</audio>
<script>
var mySong=document.getElementById("audio1");
function playSong()
{
mySong.play();
}
function pauseSong()
{
mySong.pause();
}
</script>
</body>
</html>
There are a few things to try. First and foremost, check mySong.canPlayType("audio/mpeg"). It should return "maybe". If it does not, your browser doesn't support MP3 and you should try a different one.
Then, the <audio> tag's type attribute should be audio/mpeg, not audio/mp3. MIME type is important.
So important, in fact, that if it still doesn't work you should check to ensure that the server is configured to serve .mp3 files with the audio/mpeg MIME type header.
If this still doesn't work... try turning the speakers on :p I'm kidding, if you still have problems after these steps, let me know.
Related
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So I have a very simple code which worked yesterday. I get back on the computer this morning and it looks like it does not work anymore.
What I checked:
Whether or not my function runs onload (it does)
If the path for the audio file is correct (it is)
I tried putting the src directly in the audio tag (and deleting the onload call just to make sure). It still does not work.
The code:
HTML:
<body onload="startMusic()">
<audio id="audio" autoplay loop>
Your browser does not support HTML5 audio.
</audio>
<!--rest of the page-->
JS:
const audio = document.getElementById("audio");
function startMusic(){
audio.src = "./audio/myFile.mp3";
}
I don't have any console error.
Thank you for your time.
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I'm trying out new things for my website which involve when I hover, click or release a link I interact with it should play a sound. I am still getting used to the basics of HTML, sorry if I seem confused but I thought this would have been the right direction.
This is what I have so far:
<html>
<audio id="myaudio" src="hover"></audio>
<audio id="myaudio2" src="click"></audio>
<audio id="myaudio3" src="release"></audio>
<body>
<a href="https://google.com"
onmouseover="document.getElementById('myaudio').play()"
onmousedown="document.getElementById('myaudio2').play()"
onmouseup="document.getElementById('myaudio3').play()">google.com</a>
</body>
</html>
#guest271314 helped me with this one, turns out it was really easy.
I forgot that the SRC tag needs to point to a link. Here is the correction:
<html>
<audio id="myaudio" src="http://yourdomain.com/hover.wav"></audio>
<audio id="myaudio2" src="http://yourdomain.com/click.wav"></audio>
<audio id="myaudio3" src="http://yourdomain.com/release.wav"></audio>
<body>
google.com
</body>
</html>
Here's the part fixed:
src="http://yourdomain.com/sound.wav"
In order to make your web page plays music, the html code can be as simple as
<audio id="myaudio" src="c.mp3" controls></audio>
I am making a html webpage which needs to run ONLY LOCALLY(Offline Website). Using "input file tag", user selects and gives the video file path that needs to be played. For the video player I am using the Video tag of html.
I tried doing this with the below code but the video is not playing.
Please help me.
Note: It is an OFFLINE website.
CODE:
<html>
<head>
<script>
function func() {
var videolink = document.getElementById('fileID');
var player = document.getElementById('videoID');
var mp4Vid = document.getElementById('sourceID');
$(mp4Vid).attr('src',videolink);
player.load();
player.play();
}
</script>
</head>
<body>
<input type="file" id="fileID" />
<input type="button" onClick="func();"/>
<center>
<video id="videoID" width="320" height="240" controls autoplay>
<source id="sourceID" type="video/mp4">
</video>
</center>
</body>
</html>
try change this:
$(mp4Vid).attr('src',videolink);
on that:
$(mp4Vid).attr('src', '' + videolink).appendTo($('#sourceID'));
You cannot with JavaScript alone, except on modern browsers.
The Issue
It's a Web browser security feature to obsure the full path of file uploads. If you attempt to read the value of a file upload field, you'll receive something like this:
$('input[type="file"]').val(); // "C:\fakepath\some_file.mp4"
Even if in this hypothetical the file exists on my desktop (e.g., ~/Desktop/some_file.mp4).
The Workaround
On modern browsers, see "In HTML5 how to show preview of image before upload?" for using FileReader on the file input and using its source. Otherwise, you can likely do so using Adobe Flash, where installed.