html file and audio in the SVG tag
I would like to play a background audio in an HTML file (cannot be changed to svg file).
I also put my audio inside the <svg> tag (required).
<html>
<svg>
<audio id="backgroundmusic" loop>
<source src="backgroundmusic.wav" type="audio/wav" />
</audio>
</svg>
</html>
Then, I use a function in other .js file to play the audio.
function playaudio(id){
var audiotesting = document.getElementById(id);
audiotesting.currentTime = 0;
audiotesting.play();
}
The function cannot work probably. Is there any method to play an audio inside <svg> tag?
javascript html svg
asked Nov 12 at 13:29
davis hang
103
add a comment |
I would like to play a background audio in an HTML file (cannot be changed to svg file).
I also put my audio inside the <svg> tag (required).
<html>
<svg>
<audio id="backgroundmusic" loop>
<source src="backgroundmusic.wav" type="audio/wav" />
</audio>
</svg>
</html>
Then, I use a function in other .js file to play the audio.
function playaudio(id){
var audiotesting = document.getElementById(id);
audiotesting.currentTime = 0;
audiotesting.play();
}
The function cannot work probably. Is there any method to play an audio inside <svg> tag?
javascript html svg
asked Nov 12 at 13:29
davis hang
103
add a comment |
I would like to play a background audio in an HTML file (cannot be changed to svg file).
I also put my audio inside the <svg> tag (required).
<html>
<svg>
<audio id="backgroundmusic" loop>
<source src="backgroundmusic.wav" type="audio/wav" />
</audio>
</svg>
</html>
Then, I use a function in other .js file to play the audio.
function playaudio(id){
var audiotesting = document.getElementById(id);
audiotesting.currentTime = 0;
audiotesting.play();
}
The function cannot work probably. Is there any method to play an audio inside <svg> tag?
javascript html svg
asked Nov 12 at 13:29
davis hang
103
I would like to play a background audio in an HTML file (cannot be changed to svg file).
I also put my audio inside the <svg> tag (required).
<html>
<svg>
<audio id="backgroundmusic" loop>
<source src="backgroundmusic.wav" type="audio/wav" />
</audio>
</svg>
</html>
Then, I use a function in other .js file to play the audio.
function playaudio(id){
var audiotesting = document.getElementById(id);
audiotesting.currentTime = 0;
audiotesting.play();
}
The function cannot work probably. Is there any method to play an audio inside <svg> tag?
javascript html svg
javascript html svg
asked Nov 12 at 13:29
davis hang
103
asked Nov 12 at 13:29
davis hang
103
asked Nov 12 at 13:29
davis hang
103
asked Nov 12 at 13:29
davis hang
103
asked Nov 12 at 13:29
davis hang
103
103
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Actually, none of the Web APIs are tied to HTML specifically -- except classes like HTMLDocument and things that are directly related to HTML (HTML*Element classes), obviously. Otherwise, all APIs are available to the script interpreter, regardless of document type -- the window object and its document property, and all the rest of global classes, HTMLDocument included.
The JavaScript snippet you pasted would work with an SVG document hosting it just as well as with an HTML document. The problem lies with accessing the audio element -- where can it be embedded and located? getElementById would find it alright, but it would find it as an XML element with local name audio, it wouldn't know it was related to the HTML audio element, not at all. The element does not have play or currentTime properties.
With an SVG document you embed a script interpreter though the script element, much like with HTML.
However, you cannot simply put what I assume is the HTML audio element right inside an SVG, even an "inline" SVG document. You have at least two options though:
Embed the audio using the
foreignObjectfacility in SVG:
Put the
audioelement outside SVG. If you only care about audio playback, and not the added convenience of the audio controls the browser typically may render, you'd be no worse off than having the element inside SVG. Ask yourself, why would you want theaudioelement inside the SVG in the first place?
answered Nov 12 at 13:41
amn
3,91753062
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263238%2fhtml-file-and-audio-in-the-svg-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Actually, none of the Web APIs are tied to HTML specifically -- except classes like HTMLDocument and things that are directly related to HTML (HTML*Element classes), obviously. Otherwise, all APIs are available to the script interpreter, regardless of document type -- the window object and its document property, and all the rest of global classes, HTMLDocument included.
The JavaScript snippet you pasted would work with an SVG document hosting it just as well as with an HTML document. The problem lies with accessing the audio element -- where can it be embedded and located? getElementById would find it alright, but it would find it as an XML element with local name audio, it wouldn't know it was related to the HTML audio element, not at all. The element does not have play or currentTime properties.
With an SVG document you embed a script interpreter though the script element, much like with HTML.
However, you cannot simply put what I assume is the HTML audio element right inside an SVG, even an "inline" SVG document. You have at least two options though:
Embed the audio using the
foreignObjectfacility in SVG:
Put the
audioelement outside SVG. If you only care about audio playback, and not the added convenience of the audio controls the browser typically may render, you'd be no worse off than having the element inside SVG. Ask yourself, why would you want theaudioelement inside the SVG in the first place?
answered Nov 12 at 13:41
amn
3,91753062
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
add a comment |
Actually, none of the Web APIs are tied to HTML specifically -- except classes like HTMLDocument and things that are directly related to HTML (HTML*Element classes), obviously. Otherwise, all APIs are available to the script interpreter, regardless of document type -- the window object and its document property, and all the rest of global classes, HTMLDocument included.
The JavaScript snippet you pasted would work with an SVG document hosting it just as well as with an HTML document. The problem lies with accessing the audio element -- where can it be embedded and located? getElementById would find it alright, but it would find it as an XML element with local name audio, it wouldn't know it was related to the HTML audio element, not at all. The element does not have play or currentTime properties.
With an SVG document you embed a script interpreter though the script element, much like with HTML.
However, you cannot simply put what I assume is the HTML audio element right inside an SVG, even an "inline" SVG document. You have at least two options though:
Embed the audio using the
foreignObjectfacility in SVG:
Put the
audioelement outside SVG. If you only care about audio playback, and not the added convenience of the audio controls the browser typically may render, you'd be no worse off than having the element inside SVG. Ask yourself, why would you want theaudioelement inside the SVG in the first place?
answered Nov 12 at 13:41
amn
3,91753062
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
add a comment |
Actually, none of the Web APIs are tied to HTML specifically -- except classes like HTMLDocument and things that are directly related to HTML (HTML*Element classes), obviously. Otherwise, all APIs are available to the script interpreter, regardless of document type -- the window object and its document property, and all the rest of global classes, HTMLDocument included.
The JavaScript snippet you pasted would work with an SVG document hosting it just as well as with an HTML document. The problem lies with accessing the audio element -- where can it be embedded and located? getElementById would find it alright, but it would find it as an XML element with local name audio, it wouldn't know it was related to the HTML audio element, not at all. The element does not have play or currentTime properties.
With an SVG document you embed a script interpreter though the script element, much like with HTML.
However, you cannot simply put what I assume is the HTML audio element right inside an SVG, even an "inline" SVG document. You have at least two options though:
Embed the audio using the
foreignObjectfacility in SVG:
Put the
audioelement outside SVG. If you only care about audio playback, and not the added convenience of the audio controls the browser typically may render, you'd be no worse off than having the element inside SVG. Ask yourself, why would you want theaudioelement inside the SVG in the first place?
answered Nov 12 at 13:41
amn
3,91753062
Actually, none of the Web APIs are tied to HTML specifically -- except classes like HTMLDocument and things that are directly related to HTML (HTML*Element classes), obviously. Otherwise, all APIs are available to the script interpreter, regardless of document type -- the window object and its document property, and all the rest of global classes, HTMLDocument included.
The JavaScript snippet you pasted would work with an SVG document hosting it just as well as with an HTML document. The problem lies with accessing the audio element -- where can it be embedded and located? getElementById would find it alright, but it would find it as an XML element with local name audio, it wouldn't know it was related to the HTML audio element, not at all. The element does not have play or currentTime properties.
With an SVG document you embed a script interpreter though the script element, much like with HTML.
However, you cannot simply put what I assume is the HTML audio element right inside an SVG, even an "inline" SVG document. You have at least two options though:
Embed the audio using the
foreignObjectfacility in SVG:
Put the
audioelement outside SVG. If you only care about audio playback, and not the added convenience of the audio controls the browser typically may render, you'd be no worse off than having the element inside SVG. Ask yourself, why would you want theaudioelement inside the SVG in the first place?
answered Nov 12 at 13:41
amn
3,91753062
answered Nov 12 at 13:41
amn
3,91753062
answered Nov 12 at 13:41
amn
3,91753062
answered Nov 12 at 13:41
amn
3,91753062
3,91753062
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
add a comment |
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
thank you for your explanation and advising to use foreignObject.
– davis hang
Nov 13 at 6:35
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53263238%2fhtml-file-and-audio-in-the-svg-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
