Recherche avancée

Médias (1)

Mot : - Tags -/3GS

Autres articles (43)

  • MediaSPIP : Modification des droits de création d’objets et de publication définitive

    11 novembre 2010, par

    Par défaut, MediaSPIP permet de créer 5 types d’objets.
    Toujours par défaut les droits de création et de publication définitive de ces objets sont réservés aux administrateurs, mais ils sont bien entendu configurables par les webmestres.
    Ces droits sont ainsi bloqués pour plusieurs raisons : parce que le fait d’autoriser à publier doit être la volonté du webmestre pas de l’ensemble de la plateforme et donc ne pas être un choix par défaut ; parce qu’avoir un compte peut servir à autre choses également, (...)

  • Personnaliser les catégories

    21 juin 2013, par

    Formulaire de création d’une catégorie
    Pour ceux qui connaissent bien SPIP, une catégorie peut être assimilée à une rubrique.
    Dans le cas d’un document de type catégorie, les champs proposés par défaut sont : Texte
    On peut modifier ce formulaire dans la partie :
    Administration > Configuration des masques de formulaire.
    Dans le cas d’un document de type média, les champs non affichés par défaut sont : Descriptif rapide
    Par ailleurs, c’est dans cette partie configuration qu’on peut indiquer le (...)

  • HTML5 audio and video support

    13 avril 2011, par

    MediaSPIP uses HTML5 video and audio tags to play multimedia files, taking advantage of the latest W3C innovations supported by modern browsers.
    The MediaSPIP player used has been created specifically for MediaSPIP and can be easily adapted to fit in with a specific theme.
    For older browsers the Flowplayer flash fallback is used.
    MediaSPIP allows for media playback on major mobile platforms with the above (...)

Sur d’autres sites (8071)

  • Using node-media-server and FFMPEG, Transmuxing ends when rtmp is publishing with no errors

    8 juillet 2023, par Sina KH

    I've configured and used node-media-server library on 2 of my test servers and it works great, but when I'm trying to make it work on production, it creates directories for different qualities, but does not generate .ts and .m3u8 for them. It only creates original hls outputs.
My logs show that instantly after [rtmp publish] Handle video. and [rtmp publish] Handle audio. files, it receives [rtmp publish] Close stream. id=Y8KK9U3D streamPath=/live/15_1280 streamId=1 and [rtmp play] Close stream. id=7MC9Q65N streamPath=/live/15_1280 streamId=1
Please note that everything is the same on my test and prod servers, and with no known cause, it fails on some of my servers and works on some other ones. I've tried both deploying dockerized and not dockerized versions, with different node versions.
FFMPEG version is also the same on all systems.

    


    My configs :

    


    const config = {
    rtmp: {
        port: parseInt(process.env.STREAM_RTMP_PORT || '8082'),
        chunk_size: parseInt(process.env.STREAM_CHUNK_SIZE || '60000'),
        gop_cache: true,
        ping: 60,
        ping_timeout: 30
    },
    http: {
        mediaroot: process.env.FILE_PATH + '/media',
        port: parseInt(process.env.STREAM_HTTP_PORT || '8081'),
        allow_origin: '*'
    },
    auth: process.env.STREAM_SECRET?.length ? {
        api: true,
        play: false,
        publish: true,
        secret: process.env.STREAM_SECRET,
        api_user: process.env.STREAM_API_AUTH_USER,
        api_pass: process.env.STREAM_API_AUTH_PASS,
    } : undefined,
    trans: {
        ffmpeg: process.env.FFMPEG_PATH || '',
        tasks: [
            {
                app: 'live',

                hls: true,
                hlsFlags: '[hls_time=2:hls_list_size=3:hls_flags=delete_segments]',
                hlsKeep: true, // to prevent hls file delete after end the stream

                // dash: true,
                // dashFlags: '[f=dash:window_size=3:extra_window_size=5]',
                // dashKeep: true, // to prevent dash file delete after end the stream

                mp4: true,
                mp4Flags: '[movflags=frag_keyframe+empty_moov]',
            }
        ]
    },
    fission: {
        ffmpeg: process.env.FFMPEG_PATH || '',
        tasks: [
            {
                rule: "live/*",
                model: [
                    {
                        ab: "128k",
                        vb: "1500k",
                        vs: "720x1280",
                        vf: "30",
                    },
                    {
                        ab: "64k",
                        vb: "1000k",
                        vs: "480x854",
                        vf: "24",
                    },
                    {
                        ab: "32k",
                        vb: "600k",
                        vs: "360x640",
                        vf: "20",
                    },
                ]
            },
        ]
    }
}


    


    and logs :

    


    [NodeEvent on preConnect] id=OKRRCRT1 args={"app":"live","type":"nonprivate","supportsGoAway":true,"flashVer":"FMLE/3.0 (compatible; FMSc/1.0)","swfUrl":"rtmp://IP_PORT_HERE/live","tcUrl":"rtmp://IP_PORT_HERE/live"}
7/5/2023 16:13:28 963 [INFO] [rtmp connect] id=OKRRCRT1 ip=MY_IP_HERE app=live args={"app":"live","type":"nonprivate","supportsGoAway":true,"flashVer":"FMLE/3.0 (compatible; FMSc/1.0)","swfUrl":"rtmp://IP_PORT_HERE/live","tcUrl":"rtmp://IP_PORT_HERE/live"}
[NodeEvent on postConnect] id=OKRRCRT1 args={"app":"live","type":"nonprivate","supportsGoAway":true,"flashVer":"FMLE/3.0 (compatible; FMSc/1.0)","swfUrl":"rtmp://IP_PORT_HERE/live","tcUrl":"rtmp://IP_PORT_HERE/live"}
[NodeEvent on prePublish] id=OKRRCRT1 StreamPath=/live/15 args={"sign":"CORRECT_SIGN_HERE__REMOVED_TO_SHARE_IT_WITH_YOU"}
7/5/2023 16:13:28 963 [INFO] [rtmp publish] New stream. id=OKRRCRT1 streamPath=/live/15 streamId=1
[NodeEvent on postPublish] id=OKRRCRT1 StreamPath=/live/15 args={"sign":"CORRECT_SIGN_HERE__REMOVED_TO_SHARE_IT_WITH_YOU"}
7/5/2023 16:13:28 963 [INFO] [Transmuxing MP4] /live/15 to /home/data/stream_files/media/live/15/2023-07-05-16-13-28.mp4
7/5/2023 16:13:28 963 [INFO] [Transmuxing HLS] /live/15 to /home/data/stream_files/media/live/15/index.m3u8
[NodeEvent on preConnect] id=CPRQV6U6 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:28 963 [INFO] [rtmp connect] id=CPRQV6U6 ip=::ffff:127.0.0.1 app=live args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on postConnect] id=CPRQV6U6 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on preConnect] id=FTAZ3SW8 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:28 963 [INFO] [rtmp connect] id=FTAZ3SW8 ip=::ffff:127.0.0.1 app=live args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on postConnect] id=FTAZ3SW8 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on prePlay] id=CPRQV6U6 StreamPath=/live/15 args={}
[NodeEvent on postPlay] id=CPRQV6U6 StreamPath=/live/15 args={}
7/5/2023 16:13:28 963 [INFO] [rtmp play] Join stream. id=CPRQV6U6 streamPath=/live/15  streamId=1 
[NodeEvent on prePlay] id=FTAZ3SW8 StreamPath=/live/15 args={}
[NodeEvent on postPlay] id=FTAZ3SW8 StreamPath=/live/15 args={}
7/5/2023 16:13:28 963 [INFO] [rtmp play] Join stream. id=FTAZ3SW8 streamPath=/live/15  streamId=1 
7/5/2023 16:13:29 963 [INFO] [rtmp publish] Handle audio. id=OKRRCRT1 streamPath=/live/15 sound_format=10 sound_type=2 sound_size=1 sound_rate=3 codec_name=AAC 48000 2ch
7/5/2023 16:13:29 963 [INFO] [rtmp publish] Handle video. id=OKRRCRT1 streamPath=/live/15 frame_type=1 codec_id=7 codec_name=H264 1920x1080
[NodeEvent on preConnect] id=ISVLTK71 args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:30 963 [INFO] [rtmp connect] id=ISVLTK71 ip=::ffff:127.0.0.1 app=live args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on postConnect] id=ISVLTK71 args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on prePublish] id=ISVLTK71 StreamPath=/live/15_1280 args={}
7/5/2023 16:13:30 963 [INFO] [rtmp publish] New stream. id=ISVLTK71 streamPath=/live/15_1280 streamId=1
[NodeEvent on postPublish] id=ISVLTK71 StreamPath=/live/15_1280 args={}
7/5/2023 16:13:30 963 [INFO] [Transmuxing MP4] /live/15_1280 to /home/data/stream_files/media/live/15_1280/2023-07-05-16-13-30.mp4
7/5/2023 16:13:30 963 [INFO] [Transmuxing HLS] /live/15_1280 to /home/data/stream_files/media/live/15_1280/index.m3u8
[NodeEvent on preConnect] id=YNOFQB7P args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:31 963 [INFO] [rtmp connect] id=YNOFQB7P ip=::ffff:127.0.0.1 app=live args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on postConnect] id=YNOFQB7P args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on preConnect] id=OT8T2OPP args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:31 963 [INFO] [rtmp connect] id=OT8T2OPP ip=::ffff:127.0.0.1 app=live args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on postConnect] id=OT8T2OPP args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on prePublish] id=YNOFQB7P StreamPath=/live/15_854 args={}
7/5/2023 16:13:31 963 [INFO] [rtmp publish] New stream. id=YNOFQB7P streamPath=/live/15_854 streamId=1
[NodeEvent on postPublish] id=YNOFQB7P StreamPath=/live/15_854 args={}
7/5/2023 16:13:31 963 [INFO] [Transmuxing MP4] /live/15_854 to /home/data/stream_files/media/live/15_854/2023-07-05-16-13-31.mp4
7/5/2023 16:13:31 963 [INFO] [Transmuxing HLS] /live/15_854 to /home/data/stream_files/media/live/15_854/index.m3u8
[NodeEvent on prePlay] id=OT8T2OPP StreamPath=/live/15_1280 args={}
[NodeEvent on postPlay] id=OT8T2OPP StreamPath=/live/15_1280 args={}
7/5/2023 16:13:31 963 [INFO] [rtmp play] Join stream. id=OT8T2OPP streamPath=/live/15_1280  streamId=1 
[NodeEvent on preConnect] id=62KCI105 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:31 963 [INFO] [rtmp connect] id=62KCI105 ip=::ffff:127.0.0.1 app=live args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on postConnect] id=62KCI105 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on preConnect] id=9QAHATOC args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:31 963 [INFO] [rtmp connect] id=9QAHATOC ip=::ffff:127.0.0.1 app=live args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on postConnect] id=9QAHATOC args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
[NodeEvent on prePlay] id=62KCI105 StreamPath=/live/15_854 args={}
[NodeEvent on postPlay] id=62KCI105 StreamPath=/live/15_854 args={}
7/5/2023 16:13:31 963 [INFO] [rtmp play] Join stream. id=62KCI105 streamPath=/live/15_854  streamId=1 
[NodeEvent on prePublish] id=9QAHATOC StreamPath=/live/15_640 args={}
7/5/2023 16:13:31 963 [INFO] [rtmp publish] New stream. id=9QAHATOC streamPath=/live/15_640 streamId=1
[NodeEvent on postPublish] id=9QAHATOC StreamPath=/live/15_640 args={}
7/5/2023 16:13:31 963 [INFO] [Transmuxing MP4] /live/15_640 to /home/data/stream_files/media/live/15_640/2023-07-05-16-13-31.mp4
7/5/2023 16:13:31 963 [INFO] [Transmuxing HLS] /live/15_640 to /home/data/stream_files/media/live/15_640/index.m3u8
[NodeEvent on preConnect] id=V308RJRW args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:31 963 [INFO] [rtmp connect] id=V308RJRW ip=::ffff:127.0.0.1 app=live args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on postConnect] id=V308RJRW args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on prePlay] id=V308RJRW StreamPath=/live/15_640 args={}
[NodeEvent on postPlay] id=V308RJRW StreamPath=/live/15_640 args={}
7/5/2023 16:13:31 963 [INFO] [rtmp play] Join stream. id=V308RJRW streamPath=/live/15_640  streamId=1 
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Handle video. id=ISVLTK71 streamPath=/live/15_1280 frame_type=1 codec_id=7 codec_name=H264 720x1280
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Handle audio. id=ISVLTK71 streamPath=/live/15_1280 sound_format=10 sound_type=2 sound_size=1 sound_rate=3 codec_name=AAC 48000 2ch
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Close stream. id=ISVLTK71 streamPath=/live/15_1280 streamId=1
[NodeEvent on donePublish] id=ISVLTK71 StreamPath=/live/15_1280 args={}
7/5/2023 16:13:32 963 [INFO] [rtmp play] Close stream. id=OT8T2OPP streamPath=/live/15_1280 streamId=1
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=OT8T2OPP
[NodeEvent on doneConnect] id=OT8T2OPP args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Handle video. id=YNOFQB7P streamPath=/live/15_854 frame_type=1 codec_id=7 codec_name=H264 480x854
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Handle audio. id=YNOFQB7P streamPath=/live/15_854 sound_format=10 sound_type=2 sound_size=1 sound_rate=3 codec_name=AAC 48000 2ch
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Close stream. id=YNOFQB7P streamPath=/live/15_854 streamId=1
[NodeEvent on donePublish] id=YNOFQB7P StreamPath=/live/15_854 args={}
7/5/2023 16:13:32 963 [INFO] [rtmp play] Close stream. id=62KCI105 streamPath=/live/15_854 streamId=1
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=62KCI105
[NodeEvent on doneConnect] id=62KCI105 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:32 963 [INFO] [rtmp publish] Close stream. id=9QAHATOC streamPath=/live/15_640 streamId=1
[NodeEvent on donePublish] id=9QAHATOC StreamPath=/live/15_640 args={}
7/5/2023 16:13:32 963 [INFO] [rtmp play] Close stream. id=V308RJRW streamPath=/live/15_640 streamId=1
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=V308RJRW
[NodeEvent on doneConnect] id=V308RJRW args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
[NodeEvent on donePlay] id=CPRQV6U6 StreamPath=/live/15 args={}
7/5/2023 16:13:32 963 [INFO] [rtmp play] Close stream. id=CPRQV6U6 streamPath=/live/15 streamId=1
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=CPRQV6U6
[NodeEvent on doneConnect] id=CPRQV6U6 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:32 963 [INFO] [Transmuxing end] /live/15_1280
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=ISVLTK71
[NodeEvent on doneConnect] id=ISVLTK71 args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:32 963 [INFO] [Transmuxing end] /live/15_640
7/5/2023 16:13:32 963 [INFO] [Transmuxing end] /live/15_854
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=9QAHATOC
[NodeEvent on doneConnect] id=9QAHATOC args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:32 963 [INFO] [rtmp disconnect] id=YNOFQB7P
[NodeEvent on doneConnect] id=YNOFQB7P args={"app":"live","type":"nonprivate","flashVer":"FMLE/3.0 (compatible; Lavf59.27.100)","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live"}
7/5/2023 16:13:32 963 [INFO] [Fission end] /live/15
7/5/2023 16:13:46 963 [INFO] [rtmp publish] Close stream. id=OKRRCRT1 streamPath=/live/15 streamId=1
[NodeEvent on donePublish] id=OKRRCRT1 StreamPath=/live/15 args={"sign":"CORRECT_SIGN_HERE__REMOVED_TO_SHARE_IT_WITH_YOU"}
7/5/2023 16:13:46 963 [INFO] [rtmp disconnect] id=OKRRCRT1
[NodeEvent on doneConnect] id=OKRRCRT1 args={"app":"live","type":"nonprivate","supportsGoAway":true,"flashVer":"FMLE/3.0 (compatible; FMSc/1.0)","swfUrl":"rtmp://IP_PORT_HERE/live","tcUrl":"rtmp://IP_PORT_HERE/live"}
7/5/2023 16:13:46 963 [INFO] [rtmp play] Close stream. id=FTAZ3SW8 streamPath=/live/15 streamId=1
7/5/2023 16:13:46 963 [INFO] [rtmp disconnect] id=FTAZ3SW8
[NodeEvent on doneConnect] id=FTAZ3SW8 args={"app":"live","flashVer":"LNX 9,0,124,2","tcUrl":"rtmp://127.0.0.1:PORT_HERE/live","fpad":false,"capabilities":15,"audioCodecs":4071,"videoCodecs":252,"videoFunction":1}
7/5/2023 16:13:46 963 [INFO] [Transmuxing end] /live/15


    


  • Converting a voice recording into an mp3

    21 juillet 2023, par Raphael M

    For a vue.js messaging project, I'm using the wavesurfer.js library to record voice messages. However Google chrome gives me an audio/webm blob and Safari gives me an audio/mp4 blob.

    


    I'm trying to find a solution to transcode the blob into audio/mp3. I've tried several methods, including ffmpeg. However, ffmpeg gives me an error when compiling "npm run dev" : "Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'".

    


    "@ffmpeg/core": "^0.11.0",
"@ffmpeg/ffmpeg": "^0.11.6"


    


    I tried to downgrade ffmpeg

    


    "@ffmpeg/core": "^0.9.0",
"@ffmpeg/ffmpeg": "^0.9.8"


    


    I no longer get the error message when compiling, but when I want to convert my audio stream, the console displays a problem with SharedBuffer : "Uncaught (in promise) ReferenceError : SharedArrayBuffer is not defined".

    


    Here's my complete code below.
Is there a reliable way of transcoding the audio stream into mp3 ?

    


    Can you give me an example ?

    


    Thanks

    


    <template>&#xA;  <div class="left-panel">&#xA;    <header class="radial-blue">&#xA;      <div class="container">&#xA;        <h1 class="mb-30">Posez votre premi&#xE8;re question &#xE0; nos th&#xE9;rapeutes</h1>&#xA;        <p><b>Attention</b>, vous disposez seulement de 2 messages. Veillez &#xE0; les utiliser de mani&#xE8;re judicieuse !</p>&#xA;        <div class="available-messages">&#xA;          <div class="item disabled">&#xA;            <span>Message 1</span>&#xA;          </div>&#xA;          <div class="item">&#xA;            <span>Message 2</span>&#xA;          </div>&#xA;        </div>&#xA;      </div>&#xA;    </header>&#xA;  </div>&#xA;  <div class="right-panel">&#xA;    <div class="messagerie bg-light">&#xA;      <messaging ref="messagingComponent"></messaging>&#xA;      <footer>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/record-start.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div class="loading-animation">&#xA;          <img src="http://stackoverflow.com/assets/backoffice/images/record-loading.svg" style='max-width: 300px; max-height: 300px' />&#xA;        </div>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/record-stop.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div class="textarea gradient text-dark">&#xA;          <textarea placeholder="Posez votre question"></textarea>&#xA;        </div>&#xA;        <div class="loading-text">Chargement de votre microphone en cours...</div>&#xA;        <div class="loading-text">Envoi de votre message en cours...</div>&#xA;        <div ref="visualizer"></div>&#xA;        <button type="button"><img src="http://stackoverflow.com/assets/backoffice/images/send.svg" style='max-width: 300px; max-height: 300px' /></button>&#xA;        <div>&#xA;          {{ formatTimer() }}&#xA;        </div>&#xA;      </footer>&#xA;    </div>&#xA;  </div>&#xA;</template>&#xA;&#xA;<code class="echappe-js">&lt;script&gt;&amp;#xA;import Messaging from &quot;./Messaging.vue&quot;;&amp;#xA;import { createFFmpeg, fetchFile } from &amp;#x27;@ffmpeg/ffmpeg&amp;#x27;;&amp;#xA;&amp;#xA;export default {&amp;#xA;  data() {&amp;#xA;    return {&amp;#xA;      isMicrophoneLoading: false,&amp;#xA;      isSubmitLoading: false,&amp;#xA;      isMobile: false,&amp;#xA;      isMessagerie: false,&amp;#xA;      isRecording: false,&amp;#xA;      audioUrl: &amp;#x27;&amp;#x27;,&amp;#xA;      messageText: &amp;#x27;&amp;#x27;,&amp;#xA;      message:null,&amp;#xA;      wavesurfer: null,&amp;#xA;      access:(this.isMobile?&amp;#x27;denied&amp;#x27;:&amp;#x27;granted&amp;#x27;),&amp;#xA;      maxMinutes: 5,&amp;#xA;      orangeTimer: 3,&amp;#xA;      redTimer: 4,&amp;#xA;      timer: 0,&amp;#xA;      timerInterval: null,&amp;#xA;      ffmpeg: null,&amp;#xA;    };&amp;#xA;  },&amp;#xA;  components: {&amp;#xA;    Messaging,&amp;#xA;  },&amp;#xA;  mounted() {&amp;#xA;    this.checkScreenSize();&amp;#xA;    window.addEventListener(&amp;#x27;resize&amp;#x27;, this.checkScreenSize);&amp;#xA;&amp;#xA;    if(!this.isMobile)&amp;#xA;    {&amp;#xA;      this.$moment.locale(&amp;#x27;fr&amp;#x27;);&amp;#xA;      window.addEventListener(&amp;#x27;beforeunload&amp;#x27;, (event) =&gt; {&amp;#xA;        if (this.isMessagerie) {&amp;#xA;          event.preventDefault();&amp;#xA;          event.returnValue = &amp;#x27;&amp;#x27;;&amp;#xA;        }&amp;#xA;      });&amp;#xA;&amp;#xA;      this.initializeWaveSurfer();&amp;#xA;    }&amp;#xA;  },&amp;#xA;  beforeUnmount() {&amp;#xA;    window.removeEventListener(&amp;#x27;resize&amp;#x27;, this.checkScreenSize);&amp;#xA;  },&amp;#xA;  methods: {&amp;#xA;    checkScreenSize() {&amp;#xA;      this.isMobile = window.innerWidth &lt; 1200;&amp;#xA;&amp;#xA;      const windowHeight = window.innerHeight;&amp;#xA;      const navbarHeight = this.$navbarHeight;&amp;#xA;      let padding = parseInt(navbarHeight &amp;#x2B;181);&amp;#xA;&amp;#xA;      const messageListHeight = windowHeight - padding;&amp;#xA;      this.$refs.messagingComponent.$refs.messageList.style.height = messageListHeight &amp;#x2B; &amp;#x27;px&amp;#x27;;&amp;#xA;    },&amp;#xA;    showMessagerie() {&amp;#xA;      this.isMessagerie = true;&amp;#xA;      this.$refs.messagingComponent.scrollToBottom();&amp;#xA;    },&amp;#xA;    checkMicrophoneAccess() {&amp;#xA;      if (navigator.mediaDevices &amp;amp;&amp;amp; navigator.mediaDevices.getUserMedia) {&amp;#xA;&amp;#xA;        return navigator.mediaDevices.getUserMedia({audio: true})&amp;#xA;            .then(function (stream) {&amp;#xA;              stream.getTracks().forEach(function (track) {&amp;#xA;                track.stop();&amp;#xA;              });&amp;#xA;              return true;&amp;#xA;            })&amp;#xA;            .catch(function (error) {&amp;#xA;              console.error(&amp;#x27;Erreur lors de la demande d\&amp;#x27;acc&amp;#xE8;s au microphone:&amp;#x27;, error);&amp;#xA;              return false;&amp;#xA;            });&amp;#xA;      } else {&amp;#xA;        console.error(&amp;#x27;getUserMedia n\&amp;#x27;est pas support&amp;#xE9; par votre navigateur.&amp;#x27;);&amp;#xA;        return false;&amp;#xA;      }&amp;#xA;    },&amp;#xA;    initializeWaveSurfer() {&amp;#xA;      this.wavesurfer = this.$wavesurfer.create({&amp;#xA;        container: &amp;#x27;#visualizer&amp;#x27;,&amp;#xA;        barWidth: 3,&amp;#xA;        barHeight: 1.5,&amp;#xA;        height: 46,&amp;#xA;        responsive: true,&amp;#xA;        waveColor: &amp;#x27;rgba(108,115,202,0.3)&amp;#x27;,&amp;#xA;        progressColor: &amp;#x27;rgba(108,115,202,1)&amp;#x27;,&amp;#xA;        cursorColor: &amp;#x27;transparent&amp;#x27;&amp;#xA;      });&amp;#xA;&amp;#xA;      this.record = this.wavesurfer.registerPlugin(this.$recordPlugin.create());&amp;#xA;    },&amp;#xA;    startRecording() {&amp;#xA;      const _this = this;&amp;#xA;      this.isMicrophoneLoading = true;&amp;#xA;&amp;#xA;      setTimeout(() =&gt;&amp;#xA;      {&amp;#xA;        _this.checkMicrophoneAccess().then(function (accessible)&amp;#xA;        {&amp;#xA;          if (accessible) {&amp;#xA;            _this.record.startRecording();&amp;#xA;&amp;#xA;            _this.record.once(&amp;#x27;startRecording&amp;#x27;, () =&gt; {&amp;#xA;              _this.isMicrophoneLoading = false;&amp;#xA;              _this.isRecording = true;&amp;#xA;              _this.updateChildMessage( &amp;#x27;server&amp;#x27;, &amp;#x27;Allez-y ! Vous pouvez enregistrer votre message audio maintenant. La dur&amp;#xE9;e maximale autoris&amp;#xE9;e pour votre enregistrement est de 5 minutes.&amp;#x27;, &amp;#x27;text&amp;#x27;, &amp;#x27;&amp;#x27;, &amp;#x27;Message automatique&amp;#x27;);&amp;#xA;              _this.startTimer();&amp;#xA;            });&amp;#xA;          } else {&amp;#xA;            _this.isRecording = false;&amp;#xA;            _this.isMicrophoneLoading = false;&amp;#xA;            _this.$swal.fire({&amp;#xA;              title: &amp;#x27;Microphone non d&amp;#xE9;tect&amp;#xE9;&amp;#x27;,&amp;#xA;              html: &amp;#x27;&lt;p&gt;Le microphone de votre appareil est inaccessible ou l\&amp;#x27;acc&amp;#xE8;s a &amp;#xE9;t&amp;#xE9; refus&amp;#xE9;.&lt;/p&gt;&lt;p&gt;Merci de v&amp;#xE9;rifier les param&amp;#xE8;tres de votre navigateur afin de v&amp;#xE9;rifier les autorisations de votre microphone.&lt;/p&gt;&amp;#x27;,&amp;#xA;              footer: &amp;#x27;&lt;a href='http://stackoverflow.com/contact'&gt;Vous avez besoin d\&amp;#x27;aide ?&lt;/a&gt;&amp;#x27;,&amp;#xA;            });&amp;#xA;          }&amp;#xA;        });&amp;#xA;      }, 100);&amp;#xA;    },&amp;#xA;    stopRecording() {&amp;#xA;      this.stopTimer();&amp;#xA;      this.isRecording = false;&amp;#xA;      this.isSubmitLoading = true;&amp;#xA;      this.record.stopRecording();&amp;#xA;&amp;#xA;      this.record.once(&amp;#x27;stopRecording&amp;#x27;, () =&gt; {&amp;#xA;        const blobUrl = this.record.getRecordedUrl();&amp;#xA;        fetch(blobUrl).then(response =&gt; response.blob()).then(blob =&gt; {&amp;#xA;          this.uploadAudio(blob);&amp;#xA;        });&amp;#xA;      });&amp;#xA;    },&amp;#xA;    startTimer() {&amp;#xA;      this.timerInterval = setInterval(() =&gt; {&amp;#xA;        this.timer&amp;#x2B;&amp;#x2B;;&amp;#xA;        if (this.timer === this.maxMinutes * 60) {&amp;#xA;          this.stopRecording();&amp;#xA;        }&amp;#xA;      }, 1000);&amp;#xA;    },&amp;#xA;    stopTimer() {&amp;#xA;      clearInterval(this.timerInterval);&amp;#xA;      this.timer = 0;&amp;#xA;    },&amp;#xA;    formatTimer() {&amp;#xA;      const minutes = Math.floor(this.timer / 60);&amp;#xA;      const seconds = this.timer % 60;&amp;#xA;      const formattedMinutes = minutes &lt; 10 ? `0${minutes}` : minutes;&amp;#xA;      const formattedSeconds = seconds &lt; 10 ? `0${seconds}` : seconds;&amp;#xA;      return `${formattedMinutes}:${formattedSeconds}`;&amp;#xA;    },&amp;#xA;    async uploadAudio(blob)&amp;#xA;    {&amp;#xA;      const format = blob.type === &amp;#x27;audio/webm&amp;#x27; ? &amp;#x27;webm&amp;#x27; : &amp;#x27;mp4&amp;#x27;;&amp;#xA;&amp;#xA;      // Convert the blob to MP3&amp;#xA;      const mp3Blob = await this.convertToMp3(blob, format);&amp;#xA;&amp;#xA;      const s3 = new this.$AWS.S3({&amp;#xA;        accessKeyId: &amp;#x27;xxx&amp;#x27;,&amp;#xA;        secretAccessKey: &amp;#x27;xxx&amp;#x27;,&amp;#xA;        region: &amp;#x27;eu-west-1&amp;#x27;&amp;#xA;      });&amp;#xA;&amp;#xA;      var currentDate = new Date();&amp;#xA;      var filename = currentDate.getDate().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getMonth().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getFullYear().toString() &amp;#x2B; &amp;#x27;--&amp;#x27; &amp;#x2B; currentDate.getHours().toString() &amp;#x2B; &amp;#x27;-&amp;#x27; &amp;#x2B; currentDate.getMinutes().toString() &amp;#x2B; &amp;#x27;.mp4&amp;#x27;;&amp;#xA;&amp;#xA;      const params = {&amp;#xA;        Bucket: &amp;#x27;xxx/audio&amp;#x27;,&amp;#xA;        Key: filename,&amp;#xA;        Body: mp3Blob,&amp;#xA;        ACL: &amp;#x27;public-read&amp;#x27;,&amp;#xA;        ContentType: &amp;#x27;audio/mp3&amp;#x27;&amp;#xA;      }&amp;#xA;&amp;#xA;      s3.upload(params, (err, data) =&gt; {&amp;#xA;        if (err) {&amp;#xA;          console.error(&amp;#x27;Error uploading audio:&amp;#x27;, err)&amp;#xA;        } else {&amp;#xA;          const currentDate = this.$moment();&amp;#xA;          const timestamp = currentDate.format(&amp;#x27;dddd DD MMMM YYYY HH:mm&amp;#x27;);&amp;#xA;&amp;#xA;          this.updateChildMessage( &amp;#x27;client&amp;#x27;, &amp;#x27;&amp;#x27;, &amp;#x27;audio&amp;#x27;, mp3Blob, timestamp);&amp;#xA;          this.isSubmitLoading = false;&amp;#xA;        }&amp;#xA;      });&amp;#xA;    },&amp;#xA;    async convertToMp3(blob, format) {&amp;#xA;      const ffmpeg = createFFmpeg({ log: true });&amp;#xA;      await ffmpeg.load();&amp;#xA;&amp;#xA;      const inputPath = &amp;#x27;input.&amp;#x27; &amp;#x2B; format;&amp;#xA;      const outputPath = &amp;#x27;output.mp3&amp;#x27;;&amp;#xA;&amp;#xA;      ffmpeg.FS(&amp;#x27;writeFile&amp;#x27;, inputPath, await fetchFile(blob));&amp;#xA;&amp;#xA;      await ffmpeg.run(&amp;#x27;-i&amp;#x27;, inputPath, &amp;#x27;-acodec&amp;#x27;, &amp;#x27;libmp3lame&amp;#x27;, outputPath);&amp;#xA;&amp;#xA;      const mp3Data = ffmpeg.FS(&amp;#x27;readFile&amp;#x27;, outputPath);&amp;#xA;      const mp3Blob = new Blob([mp3Data.buffer], { type: &amp;#x27;audio/mp3&amp;#x27; });&amp;#xA;&amp;#xA;      ffmpeg.FS(&amp;#x27;unlink&amp;#x27;, inputPath);&amp;#xA;      ffmpeg.FS(&amp;#x27;unlink&amp;#x27;, outputPath);&amp;#xA;&amp;#xA;      return mp3Blob;&amp;#xA;    },&amp;#xA;    sendMessage() {&amp;#xA;      this.isSubmitLoading = true;&amp;#xA;      if (this.messageText.trim() !== &amp;#x27;&amp;#x27;) {&amp;#xA;        const emmet = &amp;#x27;client&amp;#x27;;&amp;#xA;        const text = this.escapeHTML(this.messageText)&amp;#xA;            .replace(/\n/g, &amp;#x27;&lt;br&gt;&amp;#x27;);&amp;#xA;&amp;#xA;        const currentDate = this.$moment();&amp;#xA;        const timestamp = currentDate.format(&amp;#x27;dddd DD MMMM YYYY HH:mm&amp;#x27;);&amp;#xA;&amp;#xA;        this.$nextTick(() =&gt; {&amp;#xA;          this.messageText = &amp;#x27;&amp;#x27;;&amp;#xA;&amp;#xA;          const textarea = document.getElementById(&amp;#x27;messageTextarea&amp;#x27;);&amp;#xA;          if (textarea) {&amp;#xA;            textarea.scrollTop = 0;&amp;#xA;            textarea.scrollLeft = 0;&amp;#xA;          }&amp;#xA;        });&amp;#xA;&amp;#xA;        this.updateChildMessage(emmet, text, &amp;#x27;text&amp;#x27;, &amp;#x27;&amp;#x27;, timestamp);&amp;#xA;        this.isSubmitLoading = false;&amp;#xA;      }&amp;#xA;    },&amp;#xA;    escapeHTML(text) {&amp;#xA;      const map = {&amp;#xA;        &amp;#x27;&amp;amp;&amp;#x27;: &amp;#x27;&amp;amp;amp;&amp;#x27;,&amp;#xA;        &amp;#x27;&lt;&amp;#x27;: &amp;#x27;&amp;amp;lt;&amp;#x27;,&amp;#xA;        &amp;#x27;&gt;&amp;#x27;: &amp;#x27;&amp;amp;gt;&amp;#x27;,&amp;#xA;        &amp;#x27;&quot;&amp;#x27;: &amp;#x27;&amp;amp;quot;&amp;#x27;,&amp;#xA;        &quot;&amp;#x27;&quot;: &amp;#x27;&amp;amp;#039;&amp;#x27;,&amp;#xA;        &quot;`&quot;: &amp;#x27;&amp;amp;#x60;&amp;#x27;,&amp;#xA;        &quot;/&quot;: &amp;#x27;&amp;amp;#x2F;&amp;#x27;&amp;#xA;      };&amp;#xA;      return text.replace(/[&amp;amp;&lt;&gt;&quot;&amp;#x27;`/]/g, (match) =&gt; map[match]);&amp;#xA;    },&amp;#xA;    updateChildMessage(emmet, text, type, blob, timestamp) {&amp;#xA;      const newMessage = {&amp;#xA;        id: this.$refs.messagingComponent.lastMessageId &amp;#x2B; 1,&amp;#xA;        emmet: emmet,&amp;#xA;        text: text,&amp;#xA;        type: type,&amp;#xA;        blob: blob,&amp;#xA;        timestamp: timestamp&amp;#xA;      };&amp;#xA;&amp;#xA;      this.$refs.messagingComponent.updateMessages(newMessage);&amp;#xA;    }&amp;#xA;  },&amp;#xA;};&amp;#xA;&lt;/script&gt;&#xA;

    &#xA;

  • Organic Traffic : What It Is and How to Increase It

    19 septembre 2023, par Erin — Analytics Tips

    Organic traffic can be a website’s most valuable source of visitors. But it can also be the hardest form of traffic to acquire. While paid ads can generate traffic almost instantly, you need to invest time and energy into growing traffic from search engines.

    And it all starts with understanding exactly what organic traffic is. 

    If you want to understand what organic traffic is, how to measure it and how to generate more of it, then this article is for you.

    What is organic traffic ?

    Organic traffic is the visitors your website receives from the unpaid results on search engines like Google, Bing and DuckDuckGo. 

    The higher your website ranks in the search engine results pages and the more search terms your website ranks for, the more organic traffic your site will receive. 

    Organic traffic is highly valued by marketers, partly because it has a much higher clickthrough rate than PPC ads. Research shows the top organic result has a 39.8% CTR compared to just 2.1% for paid ads.

    Organic results have a much higher click-through rate than paid ads
    (Image Source)

    So, while you can pay to appear at the top of search engines (using a platform like Google Ads, for instance), you probably won’t receive as much traffic as you would if you were to rank organically in the same search engine.

    What other types of traffic are there ? 

    Organic traffic isn’t the only type of traffic your website can get. You can also receive traffic from the following channels :

    Direct

    People familiar with your site may visit it directly, either by entering your URL into their browser or accessing it through a bookmarked link ; both scenarios are counted as direct traffic.

    Social

    Social traffic includes visits to your website from a social media platform. For example, if someone shares a link to your website on Facebook, any user who clicks on it will be counted as social traffic. 

    Websites

    Social media isn’t the only way for someone to share a link to your website. Any time a visitor finds your website by clicking on a link on another website, it will be counted as “websites”. This is also known as referral traffic on some analytics platforms. 

    Campaign

    Campaign traffic encompasses both paid and unpaid traffic sources. Paid sources include advertising on search engines and social media (also known as PPC or pay-per-click), as well as collaborations with influencers and sponsorships. Unpaid sources, such as your organisation’s email newsletters, cross-promotions with other businesses and other similar methods, are also part of this mix. 

    In simpler terms, it’s the traffic you deliberately direct to your site, and you utilise campaign tracking URLs to measure how these efforts impact your ROI.

    A word on multi-touch attribution

    If you are interested in learning more about types of traffic to track conversions, then it’s important to understand multi-touch attribution. The truth is most customers won’t just use a single traffic channel to find your website. In reality, the modern customer journey has multiple touchpoints, and customers may first find your site through an ad and then search for more about your brand on Google before going directly to your website. 

    Use multi-touch attribution tracking to accurately track the customer journey.
    (Image Source)

    You are at risk of under or overestimating the effectiveness of a marketing channel without using multi-touch attribution tracking. With this marketing analytics model, you can accurately weigh the impact of every channel and allocate budgets accordingly. 

    What are the benefits of organic traffic ?

    Getting more organic traffic is a common marketing goal for many companies. And it’s not surprising why. There’s a lot to love about organic traffic. 

    For starters, it’s arguably the most cost-effective traffic your site can receive. You will still need to pay to create and distribute organic content (whether it’s a blog post or product page). You don’t need to pay for it to show up in a search engine. You continue to get value from organic traffic long after you’ve created the page, too. A good piece of organic content can receive high volumes of monthly visitors for years. That’s a stark difference from paid ads, where traffic stops as soon as you turn off the ad. 

    It also puts your website in front of a massive audience, with Google alone processing over 3.5 billion searches every day. There’s a good chance that if your target audience is looking for a solution to their problems, they start with Google. 

    Organic traffic is fantastic at building brand awareness. Usually, users aren’t searching for a specific brand or company. They are searching for informational keywords (“how to brew the perfect cup of coffee”) or unbranded transactional keywords (“best home workout machine”). In both cases, customers can use search engines to become aware of your brand. 

    Finally, organic traffic brings in high-quality leads at every marketing funnel stage. Because users are searching for informational and transactional keywords, your site can receive visits from buyers at every stage of the marketing funnel, giving you multiple chances to convert them and helping to increase the number of touch points you have.

    How to check your website’s organic traffic

    You don’t need to complete complex calculations to determine your site’s organic traffic. A web analytics solution like Matomo will accurately measure your site’s organic traffic. 

    In Matomo, on the left-hand sidebar, you can access organic traffic data by clicking Acquisition and then selecting All Channels.

    An example report of organic traffic on Matomo
    (Image Source)

    You’ll find a detailed breakdown of all traffic sources, including organic traffic, within the specified timeframe. The report is set to the current day by default, but you can view organic traffic metrics over a day, week, month, year or a date range of your choice.

    If you want to take things further, you can get a detailed view of organic visitors by creating a custom report for “Visitors from Search Engines only.” By creating a custom report with the segment “Channel Type is search”, you’ll be able to combine other metrics like average actions per visit, bounce rate, goal conversions, etc., to create a comprehensive report on your organic traffic and the behavior of these visitors.

    Matomo also lets you integrate Google, Bing and Yahoo search consoles directly into your Matomo Analytics to monitor keyword performance.

    How to increase organic traffic

    Follow these six tips if you want to increase the web traffic you get organically from search engines. 

    Create more and better content

    Here’s the reality : Most websites don’t get much traffic from Google. Only 40% of sites rank on the first page, and just 23% sit in the top three results. 

    Let’s take quality first. The best content tends to rise to the top of search engines. That’s because it gets shared more, receives more backlinks and gets more user engagement. So, if you want to appear at the top of Google results, creating mediocre content probably won’t cut it. You need to go above and beyond what is already there. 

    But you can’t just create one fantastic piece of content and expect to receive thousands of visitors. You need multiple pages targeting as many search terms as possible. The more pages search engines index, the more opportunities you have to rank. Or, to put it another way, the more shots you take, the greater your chances of scoring. 

    Use keyword research tools

    While creating great content is essential, you want to ensure that content targets the right keywords. These keywords receive a suitable amount of traffic and are easy to rank for. 

    Keyword research tools like Ahrefs of Semrush are the easiest way to find high-traffic topics to write about. Specifically, you want to aim for long-tail keywords. These are search terms that contain three or more words. Think “Nike men’s basketball shoe” rather than “basketball shoe.”

    A keyword research report for "Basketball shoe"

    As you can see, long tail keywords have a lower monthly search volume (250 vs. 1,100 using the example above) than broad terms but are much easier to rank for (14 vs. 41 Keyword Difficulty).

    A keywords research report for Nike Men's basketball shoe

    While the above tools can help you find new topics to write about, Matomo’s Search Engine Keywords Performance plugin can help highlight topics you have already covered that could be expanded.

    Use Matomo's Search Engine Keywords Performance Plugin to see which keywords visitors use t find your website

    The plugin automatically connects to APIs from all significant search engines and imports all the keywords people search for when clicking on your websites into your Matomo report. 

    If you find a cluster of keywords on the same topic that generates a lot of visitors, it may be worth creating even more content on that topic. Similarly, if there’s a topic you think you have covered but isn’t generating much traffic, you can look at revising and refreshing your existing content to try to rank higher. 

    Build high-quality backlinks

    Backlinks are arguably the most important Google ranking factor and the primary way Google assesses the authoritativeness of your site and content. Backlinks strongly and positively correlate with traffic — at least according to 67.5% of respondents in a uSERP industry survey. 

    There are plenty of ways you can create high-quality backlinks that Google loves. Strategies include :

    • Creating and promoting the best content about a given topic
    • Guest posting on high-authority websites
    • Building relationships with other websites

    Ensure you avoid building low-quality spam links at all costs — such as private blog networks (PBNs), forum and comment spam links and directory links. These links won’t help your content to rank higher, and Google may even penalise your entire site if you build them. 

    Find and fix any technical Search Engine Optimisation (SEO) issues

    Search engines like Google need to be able to quickly and accurately crawl and index your website to rank your content. Unfortunately, many sites suffer from technical issues that impede search engine bots. 

    The good news is that certain tools make these issues easy to spot. Take the Matomo SEO Web Vitals feature, for instance. This lets you track a set of core web vital metrics, including :

    • Page Speed Score
    • First Contentful Paint (FCP)
    • Final Input Delay (FID)
    • Last Contentful Paint (LCP)
    • Cumulative Layout Shift (CLS)

    Take things even further by identifying major bugs and issues with your site. Crashes and other issues that impact user experience can also hurt your SEO and organic traffic efforts — so it’s best to eliminate them as soon as they occur. 

    See which bugs cause your site to crash and how you can recreate them

    Use Matomo’s Crash Analytics feature to get precise bug location information as well as the user’s interactions that triggered, the device they were using, etc. Scheduled reporting and alerts allow you to automate this task and instantly detect bugs as soon as they occur.

    Improve your on-page SEO

    As well as fixing technical issues, you should spend time optimising specific elements of your website to improve how it ranks in search engines. 

    There are several on-page elements you should optimise :

    • Image alt tags
    • URLs
    • Headings
    • Title tags
    • Internal links

    Your goal should be to include a target keyword in each element above. For example, your URL should be something like yoursite.com/keyword.

    It’s best to err on the side of caution here. Avoid adding too many keywords to each of these elements. This is called keyword stuffing, and Google may slap your site with a penalty. 

    Track your content’s performance

    One final way to increase organic traffic is to use an analytics platform to understand what content needs improving and which pages can be removed.

    Use Matomo's heatmap to see how customers interact with your wesbite

    Use an analytics platform like Matomo to see which pages generate the most organic traffic and which lag behind. This can help you prioritise your SEO efforts while highlighting pages that add no value. These pages can be completely revamped, redirected to another page or removed if appropriate. 

    Conclusion

    Organic traffic is arguably the most valuable traffic source your site can acquire. It is essential to monitor organic traffic levels and take steps to increase your organic traffic. 

    A good analytics platform can help you do both. Matomo’s powerful, open-source web analytics solution protects your data and your users’ privacy, while providing the SEO tools you need to send your organic traffic levels soaring. 

    Start a free 21-day trial now, no credit card required.

Navigation