How to Autoplay a Music Using Audio Tag in Jquery

how to autoplay a music using audio tag in jquery?

I know the solution !

I solved this way, if there is anyone that has the problem like me, follow me.

First, enter the link here~ chrome://flags/#autoplay-policy, and Check from Default to No user gesture is required

after then, change your code like this

function musicStart() {
    pop = window.open('', 'back__music', 'width=100,height=100', true);
    if (back__music.location.href === 'about:blank') {
        pop.document.write('<audio controls autoplay loop><source src="./music.mp3" type="audio/mp3"/></audio>');
    }
}

I wish hope with you :)

audio auto play next song when previous is finished

here is the trick to trigger next song:

music.addEventListener('ended',function(){
      //play next song
    });

How to play another song on same audio tag:

 music.pause();
 music.src = "new url";
 music.load();
 music.play();

Now here is a cool example of a playlist in html5, you can load each song at the time, case some clients (mobile) will not be happy when you consume the traffic, in next example all audios are loaded at same time to have a smooth transition from song to song,
loading the songs:

//playing flag 
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
 $(".song").each(function(){
        var load = new  Audio($(this).attr("url"));
    load.load();
    load.addEventListener('ended',function(){
       forward();
    });
    audios.push(load);
 });
//active track
var activeTrack = 0;

Highlighting witch song is playing, with a bit of jquery, yeah, case yeah I'm lazy, lazy:

var showPlaying = function()
{
    var src = audios[activeTrack].src;
   $(".song").removeClass("playing");
   $("div[url='" + src + "']").addClass("playing");
};

Fiddle here

Note: If the sound's doesn't play, manually check if audio url's are accessible

How to autoplay audio in any browser?

A couple of weeks ago I tried exactly what you intend to do, however, after a lot of research I realized this is nearly impossible now. For example in Chrome (I don't know if also in other browsers) you cannot autoplay sounds/videos unless one of these points is accomplished:

• The user interacts with your website (click on any part of your site).
• The user added your website to the home screen (mobile).
• The user has crossed the media interaction index (MEI) threshold.
• Your website is in the Google whitelist for autoplaying (such as Youtube).

In my case I did a little trick with a cookies policy button to force the users to interact with my website and trigger the sound playing.

You can see more information and examples here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Play an audio file using jQuery when a button is clicked

Which approach?

You can play audio with <audio> tag or <object> or <embed>.
Lazy loading(load when you need it) the sound is the best approach if its size is small. You can create the audio element dynamically, when its loaded you can start it with .play() and pause it with .pause().

Things we used

We will use canplay event to detect our file is ready to be played.

There is no .stop() function for audio elements. We can only pause them. And when we want to start from the beginning of the audio file we change its .currentTime. We will use this line in our example audioElement.currentTime = 0;. To achieve .stop() function we first pause the file then reset its time.

We may want to know the length of the audio file and the current playing time. We already learnt .currentTimeabove, to learn its length we use .duration.

Example Guide

1. When document is ready we created an audio element dynamically
2. We set its source with the audio we want to play.
3. We used 'ended' event to start file again.

When the currentTime is equal to its duration audio file will stop
playing. Whenever you use play(), it will start from the beginning.

4. We used timeupdate event to update current time whenever audio .currentTime changes.
5. We used canplay event to update information when file is ready to be played.
6. We created buttons to play, pause, restart.

$(document).ready(function() {    var audioElement = document.createElement('audio');    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');        audioElement.addEventListener('ended', function() {        this.play();    }, false);        audioElement.addEventListener("canplay",function(){        $("#length").text("Duration:" + audioElement.duration + " seconds");        $("#source").text("Source:" + audioElement.src);        $("#status").text("Status: Ready to play").css("color","green");    });        audioElement.addEventListener("timeupdate",function(){        $("#currentTime").text("Current second:" + audioElement.currentTime);    });        $('#play').click(function() {        audioElement.play();        $("#status").text("Status: Playing");    });        $('#pause').click(function() {        audioElement.pause();        $("#status").text("Status: Paused");    });        $('#restart').click(function() {        audioElement.currentTime = 0;    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body>    <h2>Sound Information</h2>    <div id="length">Duration:</div>    <div id="source">Source:</div>    <div id="status" style="color:red;">Status: Loading</div>    <hr>    <h2>Control Buttons</h2>    <button id="play">Play</button>    <button id="pause">Pause</button>    <button id="restart">Restart</button>    <hr>    <h2>Playing Information</h2>    <div id="currentTime">0</div></body>

<a href="#" id="music" style="color:black" class="pause">

$('#play').trigger('click');

if( audio.currentTime >= audio.duration) $('#next').trigger('click');