cefsharp cannot play audio by javascript

I am writing a dictionary program using CefSharp by C#. When the dictionary page(i.e.[Longman-love][1]) is loaded I want it could play its pronounce automatically(by clicking the pronouce icon using JavaScript). Here are related codes: C# part:

    browser.FrameLoadEnd += (sender, args) =>
    {
        //Wait for the MainFrame to finish loading
        if (args.Frame.IsMain)
        {

                browser.ExecuteScriptAsync("document.getElementsByClassName('amefile')[0].click();");

        }
    };

JavaScript part(I copyed it from web and added some ‘alert’s for debugging the program):

$(document).ready(function(){
var audio = null;

$(".speaker").click(function(){
    alert('x');
    var src_mp3 = $(this).attr("data-src-mp3");

    if (supportAudioHtml5())
        playHtml5(src_mp3);
    else if (supportAudioFlash())
        playFlash(src_mp3);
    else
        playRaw(src_mp3);

});

function supportAudioHtml5(){
    var audioTag  = document.createElement('audio');
    try {
        return ( !!(audioTag.canPlayType)
            && (audioTag.canPlayType("audio/mpeg") != "no" && audioTag.canPlayType("audio/mpeg") != "" ) );
    } catch(e){
        return false;
    }
}

function supportAudioFlash() {
    var flashinstalled = 0;
    var flashversion = 0;
    if (navigator.plugins && navigator.plugins.length){
        x = navigator.plugins["Shockwave Flash"];
        if (x){
            flashinstalled = 2;
            if (x.description) {
                y = x.description;
                flashversion = y.charAt(y.indexOf('.')-1);
            }
        } else {
            flashinstalled = 1;
        }
        if (navigator.plugins["Shockwave Flash 2.0"]){
            flashinstalled = 2;
            flashversion = 2;
        }
    } else if (navigator.mimeTypes && navigator.mimeTypes.length){
        x = navigator.mimeTypes['application/x-shockwave-flash'];
        if (x && x.enabledPlugin)
            flashinstalled = 2;
        else
            flashinstalled = 1;
    } else {
        for(var i=7; i>0; i--){
            flashVersion = 0;
            try{
                var flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + i);
                flashVersion = i;
                return (flashVersion > 0);
            } catch(e){}
        }
    }
    return (flashinstalled > 0);
}

function playHtml5(src_mp3) {
    alert('html5');
    if(audio != null){

        if(!audio.ended){
            audio.pause();
            if(audio.currentTime > 0) audio.currentTime = 0;
        }
    }

    //use appropriate source
    audio = new Audio("");
    if (audio.canPlayType("audio/mpeg") != "no" && audio.canPlayType("audio/mpeg") != "")
        audio = new Audio(src_mp3);

    //play
    audio.addEventListener("error", function(e){alert("Apologies, the sound is not available.");});
    alert('will play');
    audio.play();
}

The last alert sentence alert('will play'); showed but I could not hear anything. However,when I clicked the audio icon directly in the CefSharp browser, it could play the pronounce. How could I fix this problem? I am not a native English speaker, I hope you can understand me. Many thanks! [1]: https://www.ldoceonline.com/dictionary/love

Answer

This problem occured beacause Google had changed autoplay policy for audios and videos. You can active auto play by adding a commandline flag --autoplay-policy=no-user-gesture-required. In my case:

 public BrowserForm()
        {

            InitializeComponent();
            var settings = new CefSettings();
            settings.CachePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "CefSharp\Cache");
            settings.CefCommandLineArgs.Add("enable-media-stream", "1"); 
            settings.CefCommandLineArgs["autoplay-policy"] = "no-user-gesture-required";//Add this statement solve the problem
            Cef.Initialize(settings); 
            //some other statements
         }

If anyone happens to meet the same problem in the futrue, I hope this will help you!

Here is a related topic.

Advertisement

Answer