I am building a website and there are some podcasts on it, which when user clicks play need to play. I've got some audio elements and most of them work but one in particular doesn't, even in JSFiddle.
I've been thinking about and googling stuff but I can't figure it out. When JavaScript executes the .play() command it just returns a promise that never resolves.
Here is the html:
<audio class="pid-player" href="https://www.amplifiedpodcast.com/wp-content/uploads/2019/10/01-Amplified3-Podcast_-Sean-Stein-Sm.mp3.mp3"></audio>
Here is the JavaScript:
console.log(document.querySelector('.pid-player').play());
When I open the audio href in a new tab it plays!
This is happening in Chrome and Firefox.
Any ideas appreciated!
"href" should be src like this
<audio class="pid-player" src="https://www.amplifiedpodcast.com/wp-content/uploads/2019/10/01-Amplified3-Podcast_-Sean-Stein-Sm.mp3.mp3" controls></audio>
You need to use source tag like this:
document.querySelector('.pid-player').play()
<audio class="pid-player">
<source src="https://www.amplifiedpodcast.com/wp-content/uploads/2019/10/01-Amplified3-Podcast_-Sean-Stein-Sm.mp3.mp3" type="audio/mp3">
</audio>
Related
<audio controls="controls" preload="auto">
<source src="src/audio/blog_audio/music_file.ogg" type="audio/ogg" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.mp3" type="audio/mp3" />
Your browser does not support the audio element.
<source src="src/audio/blog_audio/music_file.aac" type="audio/aac" />
Your browser does not support the audio element.
</audio>
I searched a lot here for a solution to the problem of playing the audio in the html5 file not working, and I did not find a solution to my problem, so I want to repeat the question in another form: the audio file works on the device or local host, but after uploading to the server it does not work.
I think the code is written correctly and I don't know how to solve it
I modified the mp3 audio file type to type="audio/mpeg"
This is the console error
https://imgur.com/a/GUS48j2
Please help to solve the problem
Thank you all
This is not from your code. The problem appear because you don't set the correct permissions for the file, this is why you get a 403 error and you can't play audio files on your page.
(I know my answer is a little bit blur, hope someone else could help you better ...)
I am trying to build a feature on my web application that pulls the preview url from Spotify's API, and play the preview when the user clicks on the audio controls. I am able to save the correct URL in the source, but the song does not play. I looked at the MDN Docs, but still could not get it to work. Here is a snippet of my code in JSX:
<div className="audio-container">
<audio controls="controls">
<source src={this.props.songs[2].href} type="audio"/>
</audio>
<p className="font-style">{this.props.songs[2].name}</p>
</div>
I do not receive any errors. Is there anything obvious I am missing? Thank you in advanced!
This should work if you use type="audio/mpeg"
Working example below:
<audio controls="controls">
<source src="https://p.scdn.co/mp3-preview/83090a4db6899eaca689ae35f69126dbe65d94c9?cid=null" type="audio/mpeg"/>
</audio>
For anybody who may find this useful later, I got the audio to work by removing the source tag and putting the preview url directly in the audio tag. Example:
<audio controls src="..."></audio>
I have an audio tag inside body which contains an audio file.I want to play it when the body has finished loading.It plays in chrome but it fails to play in mozilla firefox.I tried to download the file and then play it with the local file but i got similar results.
Here's the audio tag declaration in the html:
<audio id="audio" src="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"></audio>
And here is the JS used to play the audio after the body loads:
document.body.onload=function(){
document.getElementById("audio").play();
};
Use .ogg format, i had same problem and this thing solved my problem.
see below:--
Hope it helps.
<audio id="Green">
<source src="assets/audio/Green.mp3" </source>
<source src="assets/audio/Green.ogg">
</audio>
My issue: ngIncluding a video source doesn't replace the video.
My page has a feed and a preview, each time I click on a post in the the feed, its preview gets injected (ngInclude) to the preview area.
It works fine for youtube video, for images and for text but when it gets to html5 videos, the same video keeps showing and it seems the source doesn't get replaced in the page.
Weirdest thing is when I enter chrome debugger and inspect the element, I see its source gets replaced with a different url, but the video in the preview doesn't change.
I even tried enabling autoplay and when I move through posts the video continues to play on smoothly.
Here are the relevant code bits:
The preview that gets ngIncluded:
<div ng-if="postInfo.Media.type == 'video'">
<video name="media" width="582" height="582" controls autoplay>
<source src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
</video>
</div>
The main page including bit:
<div id="preview-panel">
<ng-include src="htmlInclude" onload="responsiveCalc()"/>
</div>
And in my javascript when I get an event of post changed in the feed, I just re-initialize the $scope.htmlInclude
Anyone came across anything like it? Should I somehow refresh the video source? And if so how.
Thanks!
Try using ng-src instead of src in the video source tag
<source ng-src="{{postInfo.Media.videoStandardResolution}}" type="video/mp4">
This lets angular know that the src will be replaced and to fetch the result
What ended up solving this was removing the source tag inside the video tag and changing directly the 'src' attribute of the video.
Came across this: http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-source-element
and from there it was pretty obvious.
so my html now looks like this:
<video name="media" width="582" height="582" controls autoplay src="{{postInfo.Media.videoStandardResolution}}">
Your browser does not support the video tag.
</video>
I need to look this typing sound over and over again until my typing animation is done. I know I can use an audio editor to extend the sound but I just want to know if there is any way to do this with just html5 and javascript. I need to loop it a specific number of times then stop it.
Here is my code:
<audio autoplay>
<source src="sfx_typing.mp3" type="audio/mpeg">
<embed height="50" width="100" src="sfx_typing.mp3">
</audio>
Thanks in advance for any help.
This also should happen on page load with no delay and no plugins should be used in the audio playing.
You can play() audio again in ended event handler.