I have a .wav that I want to play when a person clicks on a link. How do I go about doing that? I'm not exactly an expert at html or css or javascript so be gentle with me
Reference
Playing audio with Javascript?
Example
Two Links
Play
Stop
jQuery click Events
$(document).ready(function(){
var audio;
$("a.playButton").click(function(){
console.log("playing");
audio = new Audio('http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media- Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav');
audio.play();
});
$("a.stopButton").click(function(){
console.log("Pause");
audio.pause();
});
});
Now this probably isn't the most accurate way to do this but it gives you an idea of how this works. If you want to use the built in audio tag you can do that too cause that will give you the controls and other helpful things.
JSFIDDLE
https://jsfiddle.net/pzth1zd5/
Related
One of my goals with learning dialogFlow and programmatic webhooks to handle intens and responses is to see if it's possible to create an audio rich quiz.
In this quiz there's a section where I would like to have multiple questions/responses with a continuous audio background playing at the same time. Is this possible or must the Google Assistant or Google Home Speaker be silent when waiting for user input?
Also, if it is possible with the above, is it also possible to make crossfades between audio backgrounds triggered by events of some kind? That is like a change of scenery without interruption/silence.
There are a number of approaches to this, depending on your exact needs and limitations you have. Not everything is completely possible, but you may be able to get close.
Dialog with Background Audio
The easiest way to do this would be to use Google's version of SSML with parallel elements using the <par> and <media> tags. (But be aware that these are non-standard tags, if you want to be able to use them elsewhere.) With this, you would have one "track" for the dialog and one for the audio. It might look something like this:
<speak><par>
<media xml:id="track-0" begin="0s" soundLevel="+0dB">
<audio src="https://actions.google.com/sounds/v1/crowds/crowd_talking.ogg" >crowd talking</audio>
</media>
<media xml:id="track-1" begin="0.75s" soundLevel="+0dB">
<seq>
<media>
<speak><p>Well, hello there</p></speak>
</media>
<media begin="2.0s">
<speak><p>How are you?</p></speak>
</media>
</seq>
</media>
</par></speak>
Is there an easy way to design this?
You might want to check out the Nightingale Visual SSML Editor which has also been released as an open source project. It can help get you started, but tweak the SSML yourself.
What about cross-fades?
Sure! Just indicate that you're fading one track out, and fading another in, starting at some offset to the end of the other track.
<speak><par>
<media xml:id="track-0" begin="0s" fadeOutDur="6s">
<audio src="https://actions.google.com/sounds/v1/alarms/digital_watch_alarm_long.ogg" >digital watch alarm long</audio>
</media>
<media xml:id="track-1" begin="track-0.end-6s" fadeInDur="6s">
<audio src="https://actions.google.com/sounds/v1/human_sounds/baby_cry_long.ogg" >baby cry long</audio>
</media>
</par></speak>
And I can have this playing while the microphone is open and listening to a user?
Well... no. Not with SSML.
If you think about this as a conversation with someone, we typically require audio cues to know when to speak. Asking a question and then giving quiet space to reply is an excellent way to do this. In person - we have other cues (we can see the other person pause, for example), but if we just have audio, we only have silence.
The Assistant works based on this sort of conversational model, so wants to make it clear to the user when it is their turn to speak.
You can argue that for some kinds of "conversations", it is normal to have a different audio cue that prompts the user. And you'd be correct. But the Assistant needs to be a general-purpose Assistant.
Then how can I do this?
Since you're making a quiz, you can use the Interactive Canvas to create a page with HTML and JavaScript. With this, you can use an <audio> tag or the MediaStream JavaScript API to create the background audio. With this, you can have the microphone open while this media still plays, but there isn't any event that lets you know when the mic is open so you can duck the audio, which is a bit of a downside.
This gets around the audio-cue issues because there are visual cues when the microphone is open.
You can also use the SSML <mark> tag to trigger events in your JavaScript so you know when the SSML from the server begins, ends, or hits other points in the audio stream.
If there are visual cues, can I use the Interactive Canvas on a smart speaker?
Well... no.
But what you can do is use runtime surface capabilities to determine if the Interactive Canvas is supported.
If it is - use it (possibly along with SSML).
If not, use the SSML method.
So I would like to host audio files on my server.
Here's how I do it.
app.use("/media/audio", express.static("media/audio"));
I have done it tons of times with images and I really haven't had a problem so far.
I am able to play these files in browser but I need little more than that.
I am not even sure how to describe it but what I need is this:
My URL only returns media player but nothing in Sources tab like shown in the picture.
The only reason I want it is because Android MediaPlayer cannot return .mp3 file just because the URL ends with .mp3. Apple doesn't have a problem with that and it plays fine.
instead of app.use("/media/audio", express.static("media/audio"));
use
app.use("/media/audio", (req, res)=>{
res.download("/media/audio.mp3");
});
On this page, if you click any "Watch Video" button, it opens a video. If you hit play and then hit Close, the audio keeps playing. Googling makes it seem like it's just something Google needs to fix, but curious if anyone knew of any way to stop it
jQuery(document).ready(function($) {
$("#hp-video").on('hidden.bs.modal', function (e) {
$("#hp-video iframe").attr("src", $("#hp-video iframe").attr("src"));
});
});
That did the trick (with the proper ID of course)
this happens alot to me and i soon found out how to do it.
just turn off the autoplay and turn off the audio of youtube.
and it wont autoplay the next vid and there is no audio on the vid
I want to play a sound from a Chrome Extension, but I read that Content Scripts cannot play sounds. So I put this code in my background script:
var audio = new Audio("alert.ogg");
audio.play();
but still no sound. From the Console of the _generated_backgound_page.html I was able to inspect the Network tab and see that the sound file is loaded successfully, but I hear nothing.
Also, in another HTML page, I could load another Javascript, which has the above code, and it works (I can hear the sound.)
The fact that it is in the background script seems to have made it fail. Also, note that I do not have a background PAGE associated with the background SCRIPT. Does that matter？
edit: problem solved. The above code works but I forgot to listen to the right sound output channel.
You can generate the background page with javascript. I think the sound must be in a html page to be loaded and played.
This should work:
document.write('<audio id="player" src="data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA" >');
document.getElementById('player').play();
I used a base64 audio file but you can use a normal file too.
I'm trying to create a mobile ready audio player. However, I'm wondering if it's possible to "mask" the src so that a user couldn't view source and download the mp3. I'm definitely a n00b, so any simple direction would be extremely helpful (IE - use 'x' to do 'y'). I don't necessarily need code examples. Thanks!
Current:
<audio src="unreleased_track01mp3">
...
</audio>
What I'd like:
<audio src="01238134781239871">
...
</audio>
No.
You could attempt to stream the audio, but if you want to play a specific file, the user will always be able to download it if the user is able to listen to it.