Wiedergabe lokale Audiodatei mit HTML

Question

Ich versuche, etwas wie this zu tun.

Aber ich weiß nicht, warum ich dieses Ding Arbeit nicht bekommen werde. Hier wird die codepen example:

$('input').on('change', function(e) { 

    var file = e.currentTarget.files[0]; 

    var reader = new FileReader(); 

    reader.onload = function(e) { 
    $('audio source').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(file); 
}); 

Die Quelle-Tag die base64 MP3-Datei empfängt, aber nicht die Datei in den Browser laden.

Answer 1

Sie setzen die src attr direkt auf dem Audio-Element. fiddle

var $audio = $('#myAudio'); 
 
$('input').on('change', function(e) { 
 
    var target = e.currentTarget; 
 
    var file = target.files[0]; 
 
    var reader = new FileReader(); 
 
    
 
    console.log($audio[0]); 
 
    if (target.files && file) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function (e) { 
 
      $audio.attr('src', e.target.result); 
 
      $audio.play(); 
 
     } 
 
     reader.readAsDataURL(file); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file"> 
 
<audio controls id="myAudio" autoplay></audio>

Answer 2

<audio controls> 
<source src="yoraudio.ogg" type="audio/ogg"> 
<source src="youraudio.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

Weitere Hilfe Besuch

This is the simplest way to play audio

Answer 3

In UWP Sie eine Datei direkt abspielen können, dass Sie nach dem Namen aus der Musikbibliothek wie unten dargestellt zu bekommen. Erhalte einfach die Erlaubnis, auf die Musikbibliothek zuzugreifen, indem du die Bibliothek im Tag "Capabilities" deiner Projekteigenschaften anklickst.

picksinglefile(); 
     var l = Windows.Storage.KnownFolders.musicLibrary; 
     var f = localStorage.getItem("alarmname").toString(); 
     l.getFileAsync(f).then(function (file) { 
      // storagefile file is available 
      var s = window.URL.createObjectURL(file); // its a storage file, so create URL 
      player1.setAttribute("src", s); 
      player1.play(); // if autoplay is false or off 
     }); 


function picksinglefile() { 
// Create the picker object and set options 
var fop = new Windows.Storage.Pickers.FileOpenPicker(); 
fop.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.musicLibrary; 
fop.fileTypeFilter.replaceAll([".mp3", ".wav"]); 
fop.pickSingleFileAsync().then(function (file) { 
    if (file) { 
     localStorage.setItem("alarmname", file.name.toString()); 
    } else { 
     alert("Operation Cancelled"); 
    } 
});