Changing images and sounds with Javasript

  1. 5 years ago

    I can change the audio of an audio file using javascript either from a button or inside a SmartObject. And it works!

    var audioObject="#obj271";
    var myAudio=$(audioObject)[0];
    myAudio.src="audio/cat.mp3";

    But if I try a similar method with an image object it doesn't work.

    var myPic=$("#obj304")[0];
    myPic.src = "img/cat.png";

    I tried a similar method and that doesn't work either
    $("#obj304")[0].setAttribute("src", "cat.png");

    Any help would be greatly appreciated.

    Thanks,
    G

  2. Angelo S

    6 Nov 2018 Administrator

    Hello Greg,
    I think the best/faster way to do this is using an Action List where you put the Switch Image action, then you can use javascript to manually run the action list, e.g.:

    $("#obj10").trigger(PubCoder.Events.Run);

    where obj10 is the ID of the action list

  3. Thanks Angelo,

    I made something in html and javascript and I want to be able to make something similar in pubcoder and make it look nice.

    Here is the html for what I made
    <html>
    <script src="JS/script.js"></script>

    <body onload="next()">
    <h1 id="text"> </h1>

    <audio id="sound">
    <source src="audio/bird.mp3" type="audio/mpeg">
    </audio>
    <img id="soundButton" src="img/sound.png"alt="pic" onclick="playAudio()" width="64" height ="64">

    <img id="pic1" src="img/bird.png" alt="pic" width="128" height ="128">

    <button onclick="previous()">Previous</button>
    <button onclick="next()">Next</button>

    </html>

    and the javascript

    function vocab(text, img, audio){
    this.text =text;
    this.img = img;
    this.audio=audio;
    }

    var cat = new vocab("cat", "img/cat.png", "audio/cat.mp3");
    var snake = new vocab("snake", "img/snake.png", "audio/snake.mp3");
    var monkey = new vocab("monkey", "img/monkey.png", "audio/monkey.mp3");
    var rabbit = new vocab("rabbit", "img/rabbit.png", "audio/rabbit.mp3");
    var tiger = new vocab("tiger", "img/tiger.png", "audio/tiger.mp3");
    var bird = new vocab("bird", "img/bird.png", "audio/bird.mp3");

    var vocabArr = new Array (cat, snake, monkey, rabbit, tiger, bird);
    document.getElementById("soundButton").addEventListener("click",playAudio());

    function myFunction() {
    document.getElementById("pic1").src=cat.img;
    document.getElementById("sound").src=cat.audio;

    }
    function playAudio() {
    document.getElementById("sound").play();
    }
    var i=-1;
    function next() {

    if(i<vocabArr.length-1){
    i=i+1;
    document.getElementById("pic1").src=vocabArr[i].img;
    document.getElementById("sound").src=vocabArr[i].audio;
    document.getElementById("text").innerHTML=vocabArr[i].text;

    }
    else
    { i=vocabArr.length-1;
    }
    console.log(i);

    }

    function previous() {
    i=i-1;
    if(i>=0){
    document.getElementById("pic1").src=vocabArr[i].img;
    document.getElementById("sound").src=vocabArr[i].audio;
    document.getElementById("text").innerHTML=vocabArr[i].text;

    }
    else
    { i=0;
    }

  4. Paolo A

    8 Nov 2018 Administrator

    Hello Greg,

    as mentioned in other posts, we are unable to support you further as this activity has a high-consuming activity. We can activate a specific support ticket, for which we charge a minimum cost. Let me know if interested by writing at support@pubcoder.com.

 

or Sign Up to reply!