my code works only in chrome
I have a simple script that you can access
here . If you click the movie waves link you are presented with a list of names when you click on one it plays a wav file(sound from a movie). If you do this in Fire Fox or Opera some links will work most won't if you use Safari none will play. Only Chrome will play them all.
Here's the html:
-
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <link rel="stylesheet" type="text/css" href="movie.css" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <script src="main.js"></script>
- </head>
- <body>
- <div id="main">
- <header><h1>Movie sounds</h1></header>
- <div id="content">
- <div id="sounds">
- <h3><a href="jimslounge.com">Movie Waves</a></h3>
- <ul id="list"> </ul>
- </div>
- </div>
- </body>
- </html>
here's the script:
- $(document).ready(function() {
- $('#sounds').click(function(e) {
- e.preventDefault();
- $.getJSON('soundsData.json', function(data) {
- var html = '';
- $.each(data, function(key, val) {
- html += '<li class="value">' + key + '<audio class="sound"><source src="./Miscellaneous/' + val + '" type="audio/wav"></audio></li>';
- });
- $('#list').html(html);
- });
- });
- $('#list').on('click', 'li', function(e) {
- e.stopPropagation();
- $('audio').each(function() { this.pause(); }); //Stop all
- $('audio', this)[0].play(); // Play this one
- });
- });
-
here's the json file abbreviated:
- {
- "angry cat" : "angryCat.wav",
- "anymore" : "anymore.wav",
- "dark side" : "darkside.wav",
- "failure to communicate" : "comm.wav",
- "count" : "count.wav",
- "darkside" : "darkside.wav",
- ...
- }