cefsharp cannot play audio by javascript

Question

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

Does your script work when run in Chrome using DevTools? Get it working in Chrome DevTools first. — amaitland, Aug 10 '20 at 08:35
@amaitland Thanks for your reply, but it works correctly in Chrome DevTools. — excper, Aug 10 '20 at 08:41
What format is the audio in? Only free and open source formats are support. — amaitland, Aug 10 '20 at 09:42
You can open DevTools see https://github.com/cefsharp/CefSharp/wiki/Trouble-Shooting#javascript-debugging it's likely you are executing your script too early or the audio format isn't supported. — amaitland, Aug 10 '20 at 09:55
Mp3 is supported, you'll have to debug the JavaScript and work put what's going on. CefSharp is just one of many chromium embedded framework wrappers. You can also search on https://magpcss.org/ceforum/index.php — amaitland, Aug 10 '20 at 10:31
@amaitland Thanks a lot! I opened DevTools and its Console said _DOMException: play() failed because the user didn't interact with the document first._.I searched the information and got a resolution by adding `settings.CefCommandLineArgs["autoplay-policy"] = "no-user-gesture-required";` to my code. — excper, Aug 10 '20 at 13:26
Great, males sense, they've been blocking auto play fora while. You can post an answer to your own question. — amaitland, Aug 10 '20 at 22:45

score 1 · Accepted Answer · answered Aug 11 '20 at 00:59

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.

cefsharp cannot play audio by javascript

1 Answers1