Forum

Activating sounds with scripting

01 May 2017 15:54
Dear friends,

I'm a long time Blender and Blender Game Engine user (since 2000). I'm new to Blend4Web and I'm loving it. Congratulations for the great work being done!

I'm making a virtual gallery project with some 100 painting in it. Here's the project so far, with placeholder audio files: http://www.quasecinema.org/expo/

What I have done to play the audio files is a gigantic node tree , with 100 connections. When the user clicks on a painting, the corresponding audio plays.

Could the audio picking be done by scripting? To make things easier, each speaker has the same name of the painting, like object "paintingABC" has a speaker named "paintingABC.Speaker".
It would be great if the script could also stop all other audio playing before playing the selected one.

Thank you very much!
Alexandre Rangel
Quase-Cinema Lab
www.quasecinema.org
04 May 2017 11:49
Hi Alexandre, welcome to the forum and thanks for your kind words!

Could the audio picking be done by scripting? To make things easier, each speaker has the same name of the painting, like object "paintingABC" has a speaker named "paintingABC.Speaker".
It would be great if the script could also stop all other audio playing before playing the selected one.
Yes, this can be done by the following snippet:
var m_cont = require("container");
var m_input = require("input");
var m_mouse = require("mouse");
var m_scenes = require("scenes");
var m_sfx = require("sfx");

var _prev_played_speaker = null;

function setup_speaker_logic() {
    var canvas_elem = m_cont.get_canvas();
    m_input.add_click_listener(canvas_elem, function(event) {
        
        var x = m_mouse.get_coords_x(event);
        var y = m_mouse.get_coords_y(event);
        var obj = m_scenes.pick_object(x, y);

        if (obj) {
            var obj_name = m_scenes.get_object_name(obj);

            if (_prev_played_speaker && m_sfx.is_playing(_prev_played_speaker))
                m_sfx.stop(_prev_played_speaker);

            var speaker_obj = m_scenes.get_object_by_name(obj_name + ".Speaker");
            m_sfx.play(speaker_obj);
            _prev_played_speaker = speaker_obj;
        }
    });
}

setup_speaker_logic() function should be called after the scene was loaded, for example, in the standard "load_cb" function. You can find more info about it and blend4web scripting here: Application Development.
Blend4Web Team
05 May 2017 00:05
Hello Ivan. Looks GREAT! Thank you.
I can understand the code and learned a lot from it… but I cannot make it work. It doesn't throw an error, but doesn't play the speakers.

The blend file originating the JSON has the objectname and objectname.Speaker structure.

Here's my fotografia.js file:

"use strict"

// register the application module
b4w.register("fotografia_app", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");

var m_cont = require("container");
var m_input = require("input");
var m_mouse = require("mouse");
var m_scenes = require("scenes");
var m_sfx = require("sfx");

var _prev_played_speaker = null;     
    
var DEBUG = (m_ver.type() == "DEBUG"); // detect application mode
var APP_ASSETS_PATH = m_cfg.get_assets_path("fotografia"); // auto detect assets path

    
//////////////////////////////////////////////////////////////////////
// function setup_speaker_logic 
//////////////////////////////////////////////////////////////////////
    
function setup_speaker_logic() {
    var canvas_elem = m_cont.get_canvas();
    m_input.add_click_listener(canvas_elem, function(event) {
        
        var x = m_mouse.get_coords_x(event);
        var y = m_mouse.get_coords_y(event);
        var obj = m_scenes.pick_object(x, y);

        if (obj) {
            var obj_name = m_scenes.get_object_name(obj);

            if (_prev_played_speaker && m_sfx.is_playing(_prev_played_speaker))
                m_sfx.stop(_prev_played_speaker);

            var speaker_obj = m_scenes.get_object_by_name(obj_name + ".Speaker");
            m_sfx.play(speaker_obj);
            _prev_played_speaker = speaker_obj;
        }
    });
}
    
    
//////////////////////////////////////////////////////////////////////
// export the method to initialize the app (called at the bottom of this file)
//////////////////////////////////////////////////////////////////////
    
exports.init = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true,
        physics_enabled: true,
        assets_dds_available: true
    });
}


//////////////////////////////////////////////////////////////////////
// callback executed when the app is initialized 
//////////////////////////////////////////////////////////////////////

function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_preloader.create_preloader();

    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    load();
}
    

//////////////////////////////////////////////////////////////////////
// load the scene data
//////////////////////////////////////////////////////////////////////
    
function load() {
    m_data.load(APP_ASSETS_PATH + "fotografia.json", load_cb, preloader_cb);
}

    
//////////////////////////////////////////////////////////////////////
// update the app's preloader
//////////////////////////////////////////////////////////////////////
function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

    
//////////////////////////////////////////////////////////////////////
// callback executed when the scene data is loaded
//////////////////////////////////////////////////////////////////////
    
function load_cb(data_id, success) {

    if (!success) {
        console.log("b4w load failure");
        return;
    }

    m_app.enable_fps_controls();
    m_app.set_cam_smooth_factor(FPS_GAME_CAM_SMOOTH_FACTOR);
    m_app.set_cam_sensitivity(FPS_GAME_SENSITIVITY);
    
    setup_speaker_logic();
    
}

});


//////////////////////////////////////////////////////////////////////
// import the app module and start the app by calling the init method
//////////////////////////////////////////////////////////////////////

b4w.require("fotografia_app").init();
Alexandre Rangel
Quase-Cinema Lab
www.quasecinema.org
05 May 2017 01:36
It works!!! Had to make the objects selectable.
Thank you very much!
Alexandre Rangel
Quase-Cinema Lab
www.quasecinema.org
 
Please register or log in to leave a reply.