chrome window.load~ .play()


chrome window.load~ .play()


window.onload = function() {
document.getElementById("up").play();
alert("k");
}



<audio id="up" src="./res/up.mp3" loop="loop"></audio>


<audio id="up" src="./res/up.mp3" loop="loop"></audio>



hi I've just began studying html&js, and the code above worked fine on IE, but only the alert happened on chrome. Is this normal?




3 Answers
3



This is because chrome throws an exception :



DOMException: The element has no supported sources.


"code": 9,
"name": "NotSupportedError",
"message": "The element has no supported sources."



Chrome has changed it's policy because blocking roughly half of unwanted media autoplays


blocking roughly half of unwanted media autoplays



READ : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes



Reference :



The Autoplay Policy launched in M66 Stable for audio and video
elements and is effectively blocking roughly half of unwanted media
autoplays in Chrome. For the Web Audio API, the autoplay policy will
launch in M70. This affects web games, some WebRTC applications, and
other web pages using audio features. Developers will need to update
their code to take advantage of the policy. More details can be found
in the Web Audio API section below.


Chrome's autoplay policies are simple:



I have edited your code to display the error




window.onload = function() {
const playPromise = document.getElementById("up").play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
console.log(error);
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
alert("k");

}


<audio id="up" src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Queen/Queen%20'Back%20Chat'.mp3" loop="loop"></audio>





wow, thank you so much
– H.Matthew
Jun 30 at 1:14



This is a result of Chrome's autoplay policy, which restricts sites from playing audio before the user has interacted with the page.



In summary autoplay in Chrome is Not allowed by default since april 2018. This to protect the user for undesired sounds. More info.



But, if the user interacts with the page (by making a click for example), then yes it is allowed, so you can change the onload code to a click. Like this:


window.addEventListener("click", function(event) {
document.getElementById("up").play();
alert("k");
});



Click on the page, and walla.



Hope it helps.





I'll try this out, thank you^^
– H.Matthew
Jun 30 at 1:15





you're welcome, Have you tried?, do you need any more help?
– Marcelo Rossi
17 hours ago






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined I have stored data user with AsyncStorage when i want to get it, it renders null in alert and the above error in the console,i don't know why. I can not see why it returns null with user but token all is well profile.js : import React, {Component} from 'react'; import { StyleSheet, Text, View, Image, TouchableOpacity,AsyncStorage} from 'react-native'; import { Container, Content, Header,Right, Left, Body} from 'native- base'; import Feather from 'react-native-vector-icons/Feather'; export default class Profile extends Component { constructor (props){ super(props); this.state = { user: null } } componentDidMount(){ this.fetchData(); } fetchData = async() =>{ let username = await AsyncStorage.getItem('user') this.setState({ user: username }) ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more