kapu Posted October 19, 2017 Share Posted October 19, 2017 Hi there, I'm looking for a way to display audio with an SVG file withe a web browser. And I don't know how to do so. I found a thread on StackOverflow but I can't comment it, so I started a new thread. So, this webpage seems to be working with this code: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml" viewBox="0 0 1600 1000"> <defs> <style> :root { background: black } text { fill: white; font: 60px sans-serif; font-weight: 900; text-anchor: middle; pointer-events: none } #about { pointer-events: visiblePainted; } a { fill: #4096EE; } a:hover { text-decoration: underline; } .button:hover { filter: url(#huerot80) } .button:active { filter: url(#huerot50) } #about { font-size: 12px } </style> <filter id="ds"> <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <feOffset dx="2" dy="2"/> <feComposite in="SourceGraphic" operator="over"/> </filter> <filter id="huerot80" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="80"/> </filter> <filter id="huerot50" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="50"/> </filter> <linearGradient id="stops"> <stop style="stop-color:#4096EE;stop-opacity:1" offset="0"/> <stop style="stop-color:#4096EE;stop-opacity:0" offset="1"/> </linearGradient> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="fill" xlink:href="#stops" spreadMethod="reflect"/> <linearGradient x1="0" y1="0" x2="0" y2="-1.5" id="stroke" xlink:href="#stops" spreadMethod="reflect" gradientTransform="scale(1 -1)"/> <script> function $(sel) { return document.querySelector(sel); } </script> <audio xmlns="http://www.w3.org/1999/xhtml"> <source src="media/bubbles.ogg" type="audio/ogg"/> <source src="media/bubbles.mp3" type="audio/mpeg"/> <source src="media/bubbles.wav" type="audio/x-wav"/> </audio> </defs> <g class="button" transform="translate(600, 200)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onclick="try { $('audio').currentTime=0; } catch(e) {} $('audio').play()"/> <text x="200" y="65" filter="url(#ds)">Click me</text> </g> <g class="button" transform="translate(600, 300)"> <rect width="400" height="86" rx="16" fill="url(#fill)" stroke="url(#stroke)" onmouseover="$('audio').play(); $('audio').loop=true;" onmouseout="$('audio').pause(); try { $('audio').currentTime=0; } catch(e) {} $('audio').loop=false;"/> <text x="200" y="65" filter="url(#ds)">Hover me</text> </g> <text id="about" x="50%" y="50%">This example uses HTML5 audio together with SVG. <a xlink:href="http://soundbible.com/1137-Bubbles.html">Bubbles sound effect</a> recorded by Mike Koenig (<a xlink:href="http://creativecommons.org/licenses/by/3.0/">CC-By</a>). </text> </svg> And when I try to copy/paste it and try it to understand how it works and how to modify it, i get a problem: When I try to trigger the audio (with the click or the hover): TypeError: $(...).play is not a function[En savoir plus] test.html:1:1 TypeError: $(...).pause is not a function[En savoir plus] I tried several things but I couldn't solve this problem and display audio with my web browser (firefox and chromium). Thank's for your help ^^ If you know an other light way to play audio with an SVG file I'm also ready to hear it ^^ Cheers Quote Link to comment Share on other sites More sharing options...
stauzs Posted October 19, 2017 Share Posted October 19, 2017 Hi, I've copied your example locally, named it html and got the same error. Then I renamed it to svg and that seems to be working. If you are using web server and generate svgs most likely you will need to add header: content-type: image/svg+xml Quote Link to comment Share on other sites More sharing options...
kapu Posted October 19, 2017 Author Share Posted October 19, 2017 AAAhh thank you =) I feel so dumb^^ And yeah, I would like to generate the same SVG with others audio files, probably through json files. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.