Play sound when item added to cart on iOS browser

Question

I have a website using WooCommerce. I want to play a short shound every time an item added to cart. I have a mp3 file ready.

I decided to used this https://github.com/admsev/jquery-play-sound It's working on PC, but I can't hear the sound on iOS browser.

my script is as following

<script>
window.onload = function() {
  var anchors = document.getElementsByTagName('a');
  for(var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];
      anchor.onclick = function() {
          $.playSound("<?php bloginfo('stylesheet_directory');?>/my_sound.mp3");
      }
  }
}</script>

What should I do to play the sound on iOS browser? Could anyone help me, please?

Answer 1

First, I would remove it from this action:

add_action( 'wp_enqueue_scripts', 'tap_sound' );

and just add it hard coded (for checking purposes) on the footer.

Seconds, I would use jQuery which can be much cleaner. example: https://webdev-il.blogspot.com/2017/10/trigger-audio-and-playing-sounds-with.html

Answer 2

Better to rewrite the script to use only jQuery, more solid :)

<script>
jQuery(document).ready(function(){
    jQuery('a').on('click', function(){
        jQuery.playSound("<?php echo get_bloginfo('stylesheet_directory');?>/my_sound.mp3");
    });
});
</script>

Report back if there is still an issue with iOS.