javascript - how to autoplay a music using audio tag in jquery? - Stack Overflow

admin管理员组

文章数量:1022964

i want to autoplay a mp3 file in jquery

i used this code,

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

loop is working, but autoplay isnt.

when i added autoplay="true" or autoplay="1" or autoplay="autoplay" to audio tag, the results were the same.

or when i used embed tag, it doesn't repeatedly play the music.

i don't care using audio tag or embed tag

how can i do?

i want to autoplay a mp3 file in jquery

i used this code,

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

loop is working, but autoplay isnt.

when i added autoplay="true" or autoplay="1" or autoplay="autoplay" to audio tag, the results were the same.

or when i used embed tag, it doesn't repeatedly play the music.

i don't care using audio tag or embed tag

how can i do?

• javascript
• jquery
• html
• audio

Share Improve this question Follow asked May 28, 2018 at 12:05 user9180012user9180012 3111 gold badge11 silver badge55 bronze badges 1

• You could maybe try to trigger playback by calling the node's play method on load. – soupy-norman Commented May 28, 2018 at 12:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

$('audio')[0].play(); (assuming you only have one audio in your page) should do the job.

A basic example:

$('audio')[0].play();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://media.w3/2010/07/bunny/04-Death_Bees_Fur.mp4" type='audio/mp4'></audio>

In jQuery you can achieve this as:

$('.music').html('<audio controls autoplay> <source src="http://media.w3/2010/07/bunny/04-Death_Bees_Fur.mp4"  type="audio/mpeg"> </audio>');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="music">

</div>

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 :)

i want to autoplay a mp3 file in jquery

i used this code,

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

loop is working, but autoplay isnt.

when i added autoplay="true" or autoplay="1" or autoplay="autoplay" to audio tag, the results were the same.

or when i used embed tag, it doesn't repeatedly play the music.

i don't care using audio tag or embed tag

how can i do?

i want to autoplay a mp3 file in jquery

i used this code,

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

loop is working, but autoplay isnt.

when i added autoplay="true" or autoplay="1" or autoplay="autoplay" to audio tag, the results were the same.

or when i used embed tag, it doesn't repeatedly play the music.

i don't care using audio tag or embed tag

how can i do?

• javascript
• jquery
• html
• audio

Share Improve this question Follow asked May 28, 2018 at 12:05 user9180012user9180012 3111 gold badge11 silver badge55 bronze badges 1

• You could maybe try to trigger playback by calling the node's play method on load. – soupy-norman Commented May 28, 2018 at 12:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 0

$('audio')[0].play(); (assuming you only have one audio in your page) should do the job.

A basic example:

$('audio')[0].play();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://media.w3/2010/07/bunny/04-Death_Bees_Fur.mp4" type='audio/mp4'></audio>

In jQuery you can achieve this as:

$('.music').html('<audio controls autoplay> <source src="http://media.w3/2010/07/bunny/04-Death_Bees_Fur.mp4"  type="audio/mpeg"> </audio>');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="music">

</div>

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 :)

本文标签： javascripthow to autoplay a music using audio tag in jqueryStack Overflow